/* Home, Explore and shared image-card presentation, v390.
   One owner for each component. Collection geometry: styles-system.css.
   Old page/card/tray selectors were removed from the legacy sheets.
   No API calls, layout polling or wheel/touch interception are needed. */
:root {
  --tryva-sidebar-width: clamp(144px, 16.2vw, 216px);
  --tryva-catalog-gutter: 20px;
  /* Room at the END of a catalog scroll so its last row can scroll clear of
     the fixed selection tray. It is scroll padding, never a shorter scroll
     box: a shorter box left a dead strip over the cards (P50). The tray's
     measured height comes from app-story.js mountGlobalSelectionTray; with no
     tray only the ordinary gutter remains. */
  --catalog-tray-space: var(--catalog-tray-reserve, 16px);
  --catalog-pin-top: 0px;
}
/* Shared navigation appearance; compact drawer behavior remains owned by
   styles-mobile.css. No second Home-only sidebar or duplicated menu. */
.nav-shell { display: flex; flex-direction: column; gap: 0; align-self: start; position: sticky; top: 0; height: var(--tryva-app-height,100dvh); width: var(--tryva-sidebar-width); min-width: 0; padding: 24px 12px 16px; background: var(--tryva-app-ground); overflow: auto; z-index: 100; }
.brand-mark { display: flex; align-items: center; gap: 12px; min-height: 36px; margin: 0 6px 30px; color: #f1edf6; text-decoration: none; }
.brand-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: .16em; }
.nav-menu, .nav-utility { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.nav-menu-secondary { margin-top: 6px; }
.nav-item, .nav-util { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; margin: 0; padding: 10px 12px; border: 0; border-radius: 5px; background: transparent; color: #a5a5b1; font: inherit; font-size: 13px; line-height: 1.4; text-decoration: none; text-align: left; white-space: nowrap; }
.nav-item.active { background: var(--tryva-app-surface-raised); color: #d0b9f9; font-weight: 600; }
.nav-item:hover, .nav-util:hover { background: var(--tryva-app-surface); color: #eee; }
.nav-icon { display: grid; place-items: center; flex: 0 0 18px; width: 18px; color: currentColor; font-size: 18px; line-height: 1; }
.nav-icon svg, .explore-search-icon svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav-divider { height: 1px; margin: 16px 4px; background: var(--tryva-app-line); }
.nav-spacer { flex: 1; min-height: 24px; }
.nav-chevron { margin-left: auto; }
.nav-create-group { width: 100%; }
body.catalog-flow-active::before, body.catalog-flow-active::after { display: none; }
html body:is(.catalog-flow-active,.library-active) .app-shell > .workspace {
  height: var(--tryva-app-height, 100dvh); min-height: 0; padding: 0 !important;
  overflow: hidden !important; background: var(--catalog-ground);
}
#catalogFlow, body.library-active #libraryView {
  display: block; width: 100%; height: 100%; min-width: 0; min-height: 0;
  overflow: hidden auto; overscroll-behavior-y: contain; overflow-anchor: none;
  background: var(--catalog-ground); scrollbar-width: thin; scrollbar-color: #45464f transparent;
}
/* showView keeps the inactive section's .hidden for non-catalog routes.
   While the catalog is active both sections belong to this one scroll. */
body.catalog-flow-active #catalogFlow > :is(#playView, #allCharactersView) {
  display: block !important; position: relative; width: 100%; height: auto;
  min-height: 0; max-height: none; margin: 0; padding: 24px var(--tryva-catalog-gutter);
  overflow: visible; background: var(--catalog-ground); visibility: visible;
  opacity: 1; transform: none; pointer-events: auto; border: 0; border-radius: 0;
}
body.library-active #libraryView {
  padding: 0 var(--tryva-catalog-gutter) var(--catalog-tray-space);
}
body.library-active #libraryView > .library-title-row { padding-top: 24px; }
body.catalog-flow-active #catalogFlow > #playView { padding-bottom: 48px; }
body.catalog-flow-active #catalogFlow > #allCharactersView { padding-bottom: var(--catalog-tray-space); min-height: 100%; }
.tryva-home-layout, .tryva-home-main { display: block; width: 100%; min-width: 0; margin: 0; padding: 0; }
.tryva-home-main > section + section { margin-top: 30px; }
#playView .section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; padding: 0; border: 0; }
#playView .section-head h2 { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 760; line-height: 1.4; letter-spacing: -.025em; color: #eeeef2; }
#playView .section-head h2::before, #playView .section-head h2::after { content: none; }
.mini-rail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mini-rail-head h2 { margin: 0; color: #eeeef2; font-family: var(--font-display); font-size: 20px; font-weight: 740; letter-spacing: -.02em; }
#playView .section-head p, #playView .section-head .eyebrow { display: none; }
.home-section-more-button { padding: 4px 0 4px 12px; min-height: 24px; border: 0; border-radius: 0; background: none; color: var(--catalog-muted); font: inherit; font-size: 12px; line-height: 1.4; white-space: nowrap; text-decoration: none; }
.home-section-more-button:hover { color: #fff; }
.tryva-home-card-carousel { position: relative; }
.tryva-home-card-carousel > :is([data-home-card-rail-prev], [data-home-card-rail-next]) {
  position: absolute; top: 50%; z-index: 12; display: grid; place-items: center;
  width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%;
  border: 1px solid #ffffff30; background: color-mix(in srgb, var(--tryva-app-surface-raised) 91%, transparent); color: #fff; box-shadow: 0 2px 8px #0005;
  transform: translateY(-50%); font: 22px/1 inherit;
}
.tryva-home-card-carousel > [data-home-card-rail-prev] { left: -12px; }
.tryva-home-card-carousel > [data-home-card-rail-next] { right: -12px; }
.tryva-home-card-carousel > button:disabled { opacity: 0; pointer-events: none; }
.tryva-home-card-carousel > button[hidden] { display: none; }
.tryva-home-card-arrow-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Full-width banner: use the creator's saved image centre at every ratio. */
.tryva-featured-hero { position: relative; width: 100%; aspect-ratio: 3.4; min-height: 0; overflow: hidden; border: 1px solid #ffffff0d; border-radius: 5px; background: var(--tryva-app-surface); isolation: isolate; }
.tryva-featured-hero.is-editorial { cursor: pointer; }
.tryva-hero-viewport { position: absolute; inset: 0; overflow: hidden; }
.tryva-hero-track { display: flex; width: 100%; height: 100%; transition: transform 250ms cubic-bezier(.22,.61,.36,1); }
.tryva-hero-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; overflow: hidden; }
.tryva-featured-media { position: absolute; inset: 0; overflow: hidden; }
.tryva-featured-media > :is(img, video) { position: absolute; left: 50%; top: 50%; width: var(--tryva-cover-width,100%); height: var(--tryva-cover-height,100%); max-width: none; max-height: none; object-fit: cover; transform: var(--tryva-cover-transform,translate(-50%,-50%)); }
.tryva-featured-shade { position: absolute; inset: 0; background: linear-gradient(90deg,#11131ae8,#10121a65 47%,transparent 76%),linear-gradient(0deg,#0a0c1233,transparent 65%); pointer-events: none; }
.tryva-featured-copy { position: relative; z-index: 2; width: 64%; height: 100%; padding: clamp(20px,3.3vw,44px); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 10px; color: white; pointer-events: none; padding-bottom: max(40px, 4%); }
#featuredHeroBadge { color: #c6c1d8; font-size: 11px; font-weight: 500; letter-spacing: .03em; }
#featuredHeroName { padding: 0; margin: 0; color: #f8f7fc; font-size: clamp(24px,2.8vw,40px); font-family: var(--font-display); font-weight: 800; line-height: 1.24; letter-spacing: -.01em; text-wrap: balance; }
#featuredHeroSummary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 0; margin: 0; color: #cac7d4; font-size: 13px; line-height: 1.6; }
#featuredHeroStartBtn { pointer-events: auto; margin-top: 8px; padding: 10px 16px; min-height: 38px; border: 1px solid #ffffff4d; border-radius: 7px; background: #17172366; color: #f5f3fc; font: inherit; font-size: 12px; box-shadow: none; }
.tryva-hero-dots { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 3; display: flex; gap: 6px; }
.tryva-hero-dots button { width: 6px; height: 6px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: #ffffff55; }
.tryva-hero-dots button[aria-selected=true], .tryva-hero-dots button.active { width: 18px; border-radius: 4px; background: #fff; }
.tryva-hero-count { position: absolute; right: 12px; bottom: 12px; z-index: 3; border-radius: 12px; background: color-mix(in srgb, var(--tryva-app-ground) 60%, transparent); padding: 4px 8px; color: #eee; font-size: 11px; font-variant-numeric: tabular-nums; }

/* Image cards: the name, metadata, tags and creator stay inside the image.
   Cover transforms are supplied once by the existing crop/media pipeline. */
:is(.catalog-card, .tryva-unified-story-card) { position: relative; isolation: isolate; overflow: hidden; padding: 0; margin: 0; border: 1px solid #ffffff0d; border-radius: var(--tryva-card-radius); background: var(--tryva-app-surface-raised); color: #fff; cursor: pointer; box-shadow: none; transition: border-color 140ms; }
:is(.catalog-card, .tryva-unified-story-card):hover { border-color: #ffffff35; }
:is(.catalog-card.selected, .tryva-unified-story-card.is-selected) { border-color: var(--catalog-accent); }
.catalog-card-media { position: absolute; inset: 0; overflow: hidden; }
/* Character crops retain their persisted card renderer; world covers use
   normalized cover geometry. The CSS must consume each renderer's own values. */
.catalog-card-media > .tryva-card-cover-media {
  position: absolute; inset: auto; left: 50%; top: 50%; right: auto; bottom: auto;
  width: var(--tryva-card-cover-width,100%); height: var(--tryva-card-cover-height,100%);
  max-width: none; max-height: none; object-fit: fill; object-position: center;
  transform: var(--tryva-card-cover-transform,translate(-50%,-50%)); transform-origin: center;
}
.tryva-unified-story-card > .tryva-unified-story-card-cover {
  position: absolute; inset: auto; left: 50%; top: 50%; right: auto; bottom: auto;
  width: var(--tryva-cover-width,100%); height: var(--tryva-cover-height,100%);
  max-width: none; max-height: none; object-fit: cover; object-position: center;
  transform: var(--tryva-cover-transform,translate(-50%,-50%)); transform-origin: center;
}
/* Editing reuses the public card, but only the outer frame handles input.
   Card links/hover controls must never capture a placement drag. */
.catalog-card-editor-surface,
.story-creator-card-crop-frame > .tryva-unified-story-card,
#cropDragFrame > .tryva-unified-story-card { cursor: inherit; }
.catalog-card-editor-surface *,
.story-creator-card-crop-frame > .tryva-unified-story-card *,
#cropDragFrame > .tryva-unified-story-card * { pointer-events: none; user-select: none; -webkit-user-drag: none; }
.catalog-card-editor-surface .catalog-card-hover,
.catalog-card-editor-surface .tryva-card-corner-actions { display: none; }
.catalog-card-editor-surface .catalog-card-copy .creator-byline { pointer-events: none; }
.catalog-card-fallback, .tryva-unified-story-card-placeholder { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(150deg,#34334c,#171d2b); color: #c6bbda; font-size: 32px; }
.catalog-card-shade, .tryva-unified-story-card-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg,transparent 33%,#0c0d1412 45%,#0c0d1488 68%,#0c0d14ed 100%); pointer-events: none; }
.catalog-card-copy, .tryva-unified-story-card-copy { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 14px; min-width: 0; padding: 0; color: #fff; pointer-events: none; }
.catalog-card-copy h3, .tryva-unified-story-card-copy h3 { margin: 0 0 5px; padding: 0; color: #fff; font-family: inherit; font-size: 18px; font-weight: 840; line-height: 1.3; letter-spacing: -.035em; text-shadow: 0 1px 4px #0004; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-card-copy > p { margin: 0 0 9px; color: #d0cdd6; font-size: 11px; line-height: 1.45; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 620; }
.catalog-card-tags { display: flex; gap: 4px; min-height: 20px; padding-right: 30px; overflow: hidden; }
.catalog-card-tags .catalog-tag { display: inline-block; flex: 0 1 auto; min-width: 0; padding: 3px 6px; border: 1px solid #ffffff18; border-radius: 4px; background: #ffffff10; color: #dbd7e3; font-size: 10px; font-weight: 400; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; box-shadow: none; }
.catalog-card-copy .creator-byline { display: flex; width: max-content; max-width: calc(100% - 36px); margin: 7px 0 0; color: #b8b3c0; font-size: 10px; line-height: 1.4; pointer-events: auto; }
.catalog-card-status-badge { display: inline-block; margin-bottom: 6px; padding: 2px 5px; border: 1px solid #ffffff26; border-radius: 4px; background: #16142066; color: #ddd3f6; font-size: 10px; font-weight: 500; line-height: 1.4; }
.tryva-unified-story-card-copy { bottom: 16px; right: 48px; }
.tryva-unified-story-card-copy h3 { font-size: 20px; font-weight: 820; letter-spacing: -.025em; }
.tryva-unified-story-card-copy p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 6px 0 0; color: #d2cfd9; font-size: 12px; line-height: 1.5; }
.tryva-card-primary-link { position: absolute; z-index: 2; inset: 0; border-radius: inherit; background: transparent; color: inherit; }
.tryva-card-primary-link:focus-visible { outline: 2px solid var(--catalog-accent); outline-offset: -3px; }
.tryva-card-corner-actions { position: absolute; z-index: 5; top: 4px; right: 4px; display: flex; gap: 0; pointer-events: none; }
.tryva-card-corner-actions > button { position: relative; display: grid; place-items: center; width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; font: 21px/1 inherit; font-size: 21px; text-shadow: 0 1px 4px #0009; box-shadow: none; pointer-events: auto; cursor: pointer; }
.tryva-card-corner-actions > button:hover { background: #10121b60; }
.tryva-card-corner-actions > .is-wishlisted { color: #d5baff; }
.tryva-card-edit-button { order: 0; }
.tryva-card-wishlist-button { order: 1; }
.catalog-card-edit-icon, .catalog-card-edit-icon svg { display: block; width: 17px; height: 17px; }
.catalog-card-edit-icon svg { fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.catalog-card-add, .tryva-unified-story-card-action {
  position: absolute; z-index: 5; right: 8px; bottom: 8px; display: grid; place-items: center;
  width: 34px; height: 34px; min-width: 34px; min-height: 34px; padding: 0; box-sizing: border-box; border: 1px solid #ffffff65; border-radius: 50%;
  background: #20202ba6; color: #fff; font-size: 23px; font-weight: 300; line-height: 1;
  box-shadow: none; opacity: 1; cursor: pointer;
}
.card-selection-icon { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; pointer-events: none; }
.catalog-card-add.selected, .tryva-unified-story-card-action.is-selected { background: #7862a6; border-color: #c7b3eb; }
.catalog-card-add:hover, .tryva-unified-story-card-action:hover { background: #7963a2; }
.catalog-card-hover { position: absolute; z-index: 3; left: 0; right: 0; top: 0; padding: 48px 14px 18px; color: #eee; background: linear-gradient(#10121ce8,#10121cbb 80%,transparent); opacity: 0; pointer-events: none; transition: opacity 150ms; }
.catalog-card-hover p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: 12px; line-height: 1.6; }
@media (hover: hover) and (pointer: fine) { .catalog-card:hover .catalog-card-hover { opacity: 1; } }
/* v469: the voice mark sits after the name as a label, not beside the heart where it read as a button. */
.catalog-card-copy h3:has(> .catalog-card-voice-badge) { display: flex; align-items: center; gap: 5px; }
.catalog-card-copy h3 > .catalog-card-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-card-voice-badge { flex: none; display: inline-grid; width: .82em; height: .82em; color: rgba(255, 255, 255, .72); pointer-events: none; }
.catalog-card-voice-badge svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Same original ribbon file and dimensions on character and world cards. */
.tryva-original-mark { position: absolute; z-index: 4; left: 0; top: 0; width: 132px; height: auto; max-width: 76%; pointer-events: none; object-fit: contain; }

/* Explore: a quiet title, one sticky tabs/search row, then compact controls. */
:is(#allCharactersView > .explore-title, #libraryView .library-title-row > .explore-title) { margin: 8px 0 14px; color: #eeeef3; font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1.4; letter-spacing: -.015em; }
.explore-head, .library-explore-head { position: sticky; top: var(--catalog-pin-top); z-index: 20; }
.explore-head, .library-controls-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 42px; padding: 0 0 6px; margin: 0; border-bottom: 1px solid var(--catalog-line); background: var(--catalog-ground); }
.library-explore-head { display: block; margin: 0 0 12px; padding: 0; background: var(--catalog-ground); }
.explore-tabs-bar { display: flex; align-items: center; gap: 4px; min-width: 0; }
.explore-tabs { display: flex; align-items: center; gap: 22px; }
.explore-tab { position: relative; padding: 6px 0; min-height: 32px; border: 0; border-radius: 0; background: transparent; color: #9b9ca8; font: inherit; font-size: 14px; line-height: 1.4; font-weight: 500; white-space: nowrap; }
.explore-tab.active { color: #ece7fa; font-weight: 650; }
.explore-tab.active::after { content: ''; position: absolute; height: 2px; bottom: -7px; left: 0; right: 0; background: var(--catalog-accent); }
.explore-search-wrap { position: relative; flex: 0 1 340px; min-width: 160px; margin: 0; }
.explore-search { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 12px; margin: 0; border: 1px solid #30313c; border-radius: 6px; background: var(--tryva-app-surface); color: #a7a5b2; }
.explore-search:focus-within { border-color: #a893d1; }
.explore-search-icon { font-size: 23px; line-height: 1; }
.explore-search input { flex: 1; min-width: 0; width: 100%; height: 36px; min-height: 0; padding: 0; border: 0 !important; outline: 0; border-radius: 0; background: transparent !important; color: #eee; font-family: inherit; font-size: 12px; box-shadow: none; }
.explore-search input::placeholder { color: #85838f; }
.explore-search-clear { width: 26px; min-height: 26px; padding: 0; background: none; border: 0; color: #aaa; }
.explore-controls-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; margin: 0; }
.explore-gender-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.explore-gender-toolbar button { padding: 6px 14px; min-height: 32px; border: 1px solid #33343f; border-radius: 18px; background: transparent; color: #a7a4b1; font: inherit; font-size: 12px; white-space: nowrap; }
.explore-gender-toolbar button.active { color: #e2d6fc; border-color: #746391; background: var(--tryva-app-surface-raised); }
.explore-controls-right { display: flex; align-items: center; gap: 12px; }
.explore-filter-btn, .explore-sort-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 32px; padding: 4px 8px; border: 0; border-radius: 6px; background: transparent; color: #aaa6b4; font: inherit; font-size: 12px; white-space: nowrap; }
.explore-filter-btn:hover, .explore-sort-btn:hover { background: var(--tryva-app-surface-raised); color: #eee; }
.explore-sort { position: relative; }
.explore-sticky-filter { display: none; width: 34px; height: 34px; min-height: 34px; padding: 8px; border: 0; border-radius: 6px; background: transparent; color: #b9b4c5; }
#allCharactersView.is-explore-pinned[data-explore-tab=browse] .explore-sticky-filter { display: grid; place-items: center; }
.explore-pane { margin: 0; padding: 0; min-width: 0; }
#exploreRankingPane { padding-top: 20px; }
.explore-story-tools { justify-content: flex-end; }

/* The global tray is mounted under body. Collapsing only changes the tray;
   Home's height and every card's screen position stay exactly the same. */
#globalSelectionTray {
  --tray-bottom: max(16px, env(safe-area-inset-bottom,0px));
  position: fixed; z-index: 90; left: calc(var(--tryva-sidebar-width, 216px) + var(--tryva-catalog-gutter));
  right: var(--tryva-catalog-gutter); bottom: var(--tray-bottom);
  margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: #d9d5e1;
  pointer-events: none; transition: transform 220ms cubic-bezier(.22,.61,.36,1);
}
.selection-tray-panel {
  display: flex; align-items: center; gap: 16px; min-width: 0; min-height: 76px;
  padding: 12px 16px; border: 1px solid #37343f; border-radius: 12px;
  background: var(--tryva-app-surface-raised); box-shadow: 0 8px 28px #0005; pointer-events: auto;
  transition: transform 220ms cubic-bezier(.22,.61,.36,1), opacity 180ms, visibility 0s;
}
body.selection-tray-empty #globalSelectionTray, body.chat-active #globalSelectionTray,
body:not(.catalog-flow-active):not(.library-active):not(.creator-profile-active):not(.story-active):not(.character-detail-active):not(.story-asset-detail-active) #globalSelectionTray { display: none; }
.selection-tray-content { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.selected-list { display: flex; gap: 6px; align-items: center; min-width: 0; overflow: auto hidden; scrollbar-width: none; padding: 2px; }
.selected-pill { position: relative; display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; min-height: 48px; padding: 0; overflow: hidden; border: 1px solid #887799; border-radius: 50%; background: #333043; color: #eee; }
.selected-pill-media { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.selected-pill-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.selected-pill-remove { position: absolute; inset: 0; display: grid; place-items: center; background: #151321b3; opacity: 0; font-size: 24px; }
.selected-pill:is(:hover,:focus-visible) .selected-pill-remove { opacity: 1; }
.selected-pill-world { display: flex; flex-basis: auto; width: auto; max-width: 180px; gap: 5px; border-radius: 8px; padding: 0 10px; font-size: 12px; white-space: nowrap; }
.selected-pill-world-tag { color: #bfafd9; font-size: 10px; }
.empty-slot { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border: 1px dashed #ffffff2b; border-radius: 50%; color: #8a819b; font-size: 20px; }
.selection-tray-label { flex: 0 0 auto; margin: 0; font-size: 12px; white-space: nowrap; color: #b9b2c4; }
.selection-tray-label > span { display: none; }
.selection-cast-count { font-size: 12px; color: #cbc0dd; }
#globalSelectionTray #startBtn { flex: 0 0 auto; min-width: 154px; min-height: 44px; padding: 10px 24px; border: 1px solid #b3a0df; border-radius: 6px; background: linear-gradient(115deg,#8964d7,#6344b4); color: #fff; font: inherit; font-size: 13px; font-weight: 650; box-shadow: none; white-space: nowrap; }
#globalSelectionTray #startBtn:disabled { opacity: .4; cursor: default; }
#selectionTrayToggle {
  position: absolute; z-index: 1; left: 50%; top: -24px; transform: translateX(-50%);
  display: grid; place-items: center; width: 48px; height: 26px; min-height: 26px;
  padding: 0; border: 1px solid #37343f; border-bottom: 0; border-radius: 12px 12px 0 0;
  background: var(--tryva-app-surface-raised); color: #c0b7ce; pointer-events: auto; cursor: pointer;
}
#selectionTrayToggle:hover { color: #fff; }
#selectionTrayToggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms; }
body.selection-tray-collapsed #globalSelectionTray { transform: translateY(100%); }
body.selection-tray-collapsed .selection-tray-panel { transform: translateY(var(--tray-bottom)); opacity: 0; visibility: hidden; pointer-events: none; transition-delay: 0s, 0s, 220ms; }
body.selection-tray-collapsed #selectionTrayToggle { border-bottom: 1px solid #37343f; border-radius: 12px; }
body.selection-tray-collapsed #selectionTrayToggle svg { transform: rotate(180deg); }
.selection-tray-panel:has(#selectedStoryScenarioBanner:not(.hidden)) { flex-wrap: wrap; }
#globalSelectionTray #selectedStoryScenarioBanner { flex: 0 0 100%; max-height: 80px; overflow: auto; }

@media (max-width: 1000px) {
  :root { --tryva-catalog-gutter: 16px; }
  #playView .section-head h2 { font-size: 18px; }
  .catalog-card-copy h3 { font-size: 16px; }
  .tryva-unified-story-card-copy h3 { font-size: 18px; }
}
body.has-compact-navigation { --catalog-pin-top: 0px; }
body.has-compact-navigation.catalog-flow-active #catalogFlow > #playView { padding-top: calc(76px + env(safe-area-inset-top,0px)); }
body.has-compact-navigation :is(#allCharactersView > .explore-title, #libraryView .library-title-row > .explore-title) { padding-left: 52px; }
body.has-compact-navigation :is(.explore-head,.library-controls-row) { padding-top: 12px; padding-left: 52px; min-height: 68px; }
body.has-compact-navigation #globalSelectionTray { left: 16px; right: 16px; }
body.is-mobile-layout .catalog-card-hover { display: none; }
body.is-mobile-layout .tryva-card-corner-actions > button { width: 44px; height: 44px; min-height: 44px; }
body.is-mobile-layout :is(.catalog-card-add,.tryva-unified-story-card-action) { width: 38px; height: 38px; min-width: 38px; min-height: 38px; }
body.is-mobile-layout :is(.catalog-card-add,.tryva-unified-story-card-action)::after { content: ''; position: absolute; inset: -3px; }
body.is-mobile-layout .selection-tray-panel { gap: 8px; }
@media (max-width: 599px) {
  body.catalog-flow-active #catalogFlow > #allCharactersView { padding-top: 24px; }
  .tryva-home-main > section + section { margin-top: 26px; }
  .tryva-featured-hero { aspect-ratio: 2; border-radius: 10px; }
  .tryva-featured-copy { width: 85%; padding: 20px; gap: 6px; }
  #featuredHeroName { font-size: 24px; }
  #featuredHeroSummary { font-size: 11px; -webkit-line-clamp: 2; }
  #featuredHeroStartBtn { display: none; }
  .tryva-hero-dots { display: none; }
  .explore-head, .library-controls-row { flex-wrap: wrap; gap: 10px; min-height: 0; padding-bottom: 12px; }
  .explore-tabs-bar { width: 100%; }
  .explore-tabs { gap: 20px; flex: 1; }
  .explore-tab.active::after { bottom: 0; }
  .explore-search-wrap { flex-basis: 100%; min-width: 0; }
  body.has-compact-navigation .explore-head { padding-left: 0; }
  body.has-compact-navigation .explore-tabs-bar { padding-left: 52px; }
  .explore-search { height: 42px; }
  .explore-search input { font-size: 16px; }
  .explore-controls-row { gap: 6px; padding: 12px 0; }
  .explore-gender-toolbar { gap: 4px; }
  .explore-gender-toolbar button { padding: 6px 10px; font-size: 11px; }
  .explore-controls-right { gap: 0; }
  .explore-filter-btn, .explore-sort-btn { padding: 4px 5px; gap: 5px; font-size: 11px; }
  .explore-filter-btn > span:first-of-type { display: none; }
  .catalog-card-copy { left: 10px; right: 10px; bottom: 12px; }
  .catalog-card-copy h3 { font-size: 16px; }
  .catalog-card-copy > p { font-size: 10px; }
  .catalog-card-tags { padding-right: 28px; gap: 3px; }
  .catalog-card-tags .catalog-tag { padding: 3px 4px; font-size: 9px; }
  .tryva-unified-story-card-copy { left: 10px; right: 44px; bottom: 12px; }
  .tryva-unified-story-card-copy h3 { font-size: 15px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .tryva-unified-story-card-copy p { font-size: 10px; -webkit-line-clamp: 1; }
  #globalSelectionTray { --tray-bottom: max(10px,env(safe-area-inset-bottom,0px)); }
  .selection-tray-panel { padding: 10px; min-height: 70px; gap: 8px; }
  .selection-tray-content { gap: 8px; }
  .selected-pill { width: 38px; height: 38px; min-height: 38px; flex-basis: 38px; }
  .selected-pill-world { flex-basis: auto; width: auto; max-width: 120px; }
  .selection-tray-label { font-size: 11px; }
  .selection-cast-count { font-size: 11px; }
  #globalSelectionTray #startBtn { min-width: 0; padding-inline: 12px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .tryva-hero-track, .catalog-card-hover, #globalSelectionTray, .selection-tray-panel, #selectionTrayToggle svg { transition: none; }
  body.selection-tray-collapsed .selection-tray-panel { transition-delay: 0s; }
}

/* Search controls use the catalogue palette and existing native selects. */
.explore-metric-note { font-size:12px; line-height:1.6; color:var(--muted); }
#exploreFilterPanel .explore-facet-chips { max-height:210px; overflow:auto; }

/* Explore ranking (app-ranking.js). One quiet list on every device: the
   server ranks, rows update in place. Controls reuse the explore control
   language (gender chips); top three only change the rank colour. */
.rank-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 12px; }
.rank-segment { display: inline-flex; padding: 3px; border: 1px solid #2c2b36; border-radius: 9px; background: var(--tryva-app-surface); }
.rank-segment button { min-height: 32px; padding: 5px 14px; border: 0; border-radius: 7px; background: transparent; color: #a19eac; font: inherit; font-size: 13px; font-weight: 550; white-space: nowrap; cursor: pointer; }
.rank-segment button.active { background: var(--tryva-app-surface-raised); color: #ece7fa; box-shadow: inset 0 0 0 1px #4a4260; }
.rank-segment button:disabled { opacity: .38; cursor: default; }
.rank-kind, .rank-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.rank-kind button, .rank-metrics button { min-height: 32px; padding: 6px 14px; border: 1px solid #33343f; border-radius: 18px; background: transparent; color: #a7a4b1; font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; }
.rank-kind button.active, .rank-metrics button.active { color: #e2d6fc; border-color: #746391; background: var(--tryva-app-surface-raised); }
.rank-note { margin: 12px 0 10px; color: #8d8a98; font-size: 12px; line-height: 1.5; }
.rank-clock:not(:empty)::before { content: "· "; }
.rank-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--catalog-line); }
.rank-list[aria-busy="true"] .rank-row:not(.is-skeleton) { opacity: .55; transition: opacity .15s ease; }
.rank-row { position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--catalog-line); }
.rank-row-open { display: grid; grid-template-columns: 40px 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; flex: 1; min-width: 0; min-height: 96px; padding: 10px 8px 10px 4px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rank-row-open:hover { background: rgba(255, 255, 255, .025); }
.rank-row-open:focus-visible { outline: 2px solid var(--catalog-accent); outline-offset: -2px; }
.rank-num { color: #8d8a98; font-family: var(--font-metric, inherit); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.rank-row.is-top .rank-num { color: #c0aceb; font-size: 21px; }
.rank-thumb { position: relative; display: grid; place-items: center; width: 52px; aspect-ratio: var(--tryva-character-card-ratio); overflow: hidden; border-radius: 6px; background: var(--tryva-app-surface-raised); color: #8d8a98; font-weight: 700; }
#exploreRankingPane[data-ranking-kind="world"] .rank-row-open { grid-template-columns: 40px 92px minmax(0, 1fr) auto; min-height: 80px; }
#exploreRankingPane[data-ranking-kind="world"] .rank-thumb { width: 92px; aspect-ratio: var(--tryva-story-card-ratio); }
.rank-thumb-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.rank-copy { display: grid; gap: 4px; min-width: 0; }
.rank-name { overflow: hidden; color: #eceaf3; font-size: 15px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.rank-sub { overflow: hidden; color: #8d8a98; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.rank-value { display: grid; justify-items: end; gap: 2px; min-width: 64px; }
.rank-value strong { color: #eceaf3; font-family: var(--font-metric, inherit); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rank-value small { color: #8d8a98; font-size: 11px; white-space: nowrap; }
.rank-value.is-rising strong { color: #7fd6a4; }
.rank-heart { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-right: 2px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #8d8a98; font-size: 18px; cursor: pointer; }
.rank-heart:hover { color: #ece7fa; background: rgba(255, 255, 255, .05); }
.rank-heart.is-wishlisted { color: #ff8fab; }
.rank-row.is-skeleton .rank-row-open { cursor: default; }
.rank-row.is-skeleton :is(.rank-thumb, .rank-copy strong, .rank-copy small) { background: linear-gradient(90deg, #17151f 0%, #201d2a 50%, #17151f 100%); background-size: 200% 100%; animation: rankSkeleton 1.2s ease-in-out infinite; }
.rank-row.is-skeleton .rank-copy strong { width: 40%; height: 14px; border-radius: 4px; }
.rank-row.is-skeleton .rank-copy small { width: 64%; height: 11px; border-radius: 4px; }
@keyframes rankSkeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .rank-row.is-skeleton :is(.rank-thumb, .rank-copy strong, .rank-copy small) { animation: none; } }
.rank-empty { margin: 40px 0; color: #8d8a98; font-size: 13px; text-align: center; }
@media (max-width: 640px) {
  .rank-toolbar { flex-direction: column; align-items: stretch; }
  .rank-segment { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .rank-row-open { grid-template-columns: 30px 44px minmax(0, 1fr) auto; gap: 10px; min-height: 84px; padding-left: 0; }
  .rank-thumb { width: 44px; }
  #exploreRankingPane[data-ranking-kind="world"] .rank-row-open { grid-template-columns: 30px 72px minmax(0, 1fr) auto; }
  #exploreRankingPane[data-ranking-kind="world"] .rank-thumb { width: 72px; }
  .rank-num { font-size: 16px; }
  .rank-row.is-top .rank-num { font-size: 18px; }
}

/* The preview scales around its upper left corner, exactly like the home hero. */
.home-banner-editor-stage { transform-origin: top left; margin: 0; min-height: 0; }
.tryva-featured-hero.is-editorial .tryva-featured-shade { display: none; }
.tryva-featured-hero.is-editorial #featuredHeroCopy { visibility: hidden; }
.tryva-featured-hero.is-editorial #featuredHeroStartBtn { display: none; }

/* Compact detail selection: no rating UI or permanent thumbnail panel. */
.card-gallery-picker { display: flex; align-items: center; justify-content: flex-start; gap: 6px; min-width: 0; max-width: 100%; height: 0; position: relative; z-index: 8; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .18s ease, transform .22s ease; }
.card-gallery-picker:empty { display: none; }
.card-gallery-picker.is-visible { visibility: visible; opacity: 1; transform: translateY(0); }
.card-gallery-picker > * { position: relative; top: 24px; }
.card-gallery-thumbs { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; max-width: 240px; padding: 3px; border-radius: 8px; background: rgba(21,18,29,.94); box-shadow: 0 4px 16px #0003; }
.card-gallery-thumb { flex: 0 0 30px; width: 30px; height: 34px; min-height: 0; padding: 0; overflow: hidden; border: 1px solid transparent; border-radius: 4px; background: #24202d; opacity: .68; }
.card-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-gallery-thumb[aria-pressed="true"] { border-color: #bf9aec; opacity: 1; }
.card-gallery-thumb:hover { opacity: 1; }
.card-gallery-arrow { flex: 0 0 24px; width: 24px; height: 30px; min-height: 0; padding: 0; border: 0; border-radius: 6px; font-size: 22px; color: #eee7fa; background: rgba(26,22,35,.94); }
#characterGalleryPicker { justify-content: center; }
#storyRatingEditor.card-gallery-picker { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; }
.card-gallery-picker button:focus-visible { outline: 2px solid #c7a9f6; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .card-gallery-picker { transition: none; } }

/* v468: a card photo first appears in its saved placement. Before its crop is
   measured and installed (is-media-ready), the frame shows its own surface,
   never the unplaced picture. Keyed on the frame, not on a class the layout
   adds later, so the very first paint is covered too. */
.catalog-card-media > :is(img, video):not(.tryva-original-mark):not(.is-media-ready),
.character-tile .tile-art > :is(img, video):not(.tryva-original-mark):not(.is-media-ready),
.tryva-unified-story-card > .tryva-unified-story-card-cover:not(.is-media-ready) { opacity: 0 !important; }
.catalog-card-media > :is(img, video).is-media-ready,
.character-tile .tile-art > :is(img, video).is-media-ready,
.tryva-unified-story-card > .tryva-unified-story-card-cover.is-media-ready { animation: tryva-card-media-in 140ms ease-out both; }
@keyframes tryva-card-media-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .catalog-card-media > :is(img, video).is-media-ready,
  .character-tile .tile-art > :is(img, video).is-media-ready,
  .tryva-unified-story-card > .tryva-unified-story-card-cover.is-media-ready { animation: none; }
}

/* v468: a home section's "more" link keeps its place while hidden, so the
   heading row has one height before and after the catalogue loads. */
:is(.section-head, .mini-rail-head) > .home-section-more-button[hidden] { display: inline-flex !important; visibility: hidden; pointer-events: none; }

/* v468: /conversations shows row placeholders until the list arrives (the
   empty-state sentence used to flash for members who do have conversations). */
.recent-room-loading-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.recent-page-list > .recent-room-skeleton { pointer-events: none; }
.recent-room-skeleton :is(.recent-room-art, .recent-room-copy strong, .recent-room-copy small) { background: linear-gradient(90deg, #17151f 0%, #201d2a 50%, #17151f 100%) !important; background-size: 200% 100% !important; animation: rankSkeleton 1.2s ease-in-out infinite; }
.recent-room-skeleton .recent-room-copy strong { display: block; width: 120px; height: 15px; border-radius: 4px; }
.recent-room-skeleton .recent-room-copy small { display: block; width: 64px; height: 12px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .recent-room-skeleton :is(.recent-room-art, .recent-room-copy strong, .recent-room-copy small) { animation: none; } }
/* v468: a room's side panel appears once, with that room's settings. */
.insight-panel.is-room-loading .insight-pane { visibility: hidden; }
/* v468: input status text stays on one line (PC and phone); typed text still wraps. */
.user-form textarea#userInput::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   v470 design system. One rule per role, the last word on the legacy layers
   above (hence the html body prefix). PC and phone share every rule; only the
   sizes differ. Motion uses opacity/transform only and never moves layout.
   ========================================================================== */
:root {
  --ds-accent-1: #8b5cf6;
  --ds-accent-2: #6a3df0;
  --ds-accent-fill: linear-gradient(135deg, var(--ds-accent-1), var(--ds-accent-2));
  --ds-accent-soft: rgba(139, 109, 255, .16);
  --ds-accent-line: rgba(139, 109, 255, .72);
  --ds-line: rgba(255, 255, 255, .1);
  --ds-surface: rgb(23, 24, 32);
  --ds-surface-2: rgba(255, 255, 255, .045);
  --ds-field: rgb(21, 18, 32);
  --ds-text: #eeeef3;
  --ds-muted: #9b96ab;
  --ds-danger: #ff8a9a;
  --ds-radius: 12px;
  --ds-radius-sm: 10px;
  --ds-ease: cubic-bezier(.2, .8, .2, 1);
  --ds-fast: 140ms;
  --ds-mid: 220ms;
  --ds-control: 40px;
}
html body.is-mobile-layout { --ds-control: 44px; }

/* --- Page titles: the Explore title is the one title (B1). ----------------- */
html body :is(.library-view .page-head h1, .recent-page-head h1, #detailName)::after { content: none !important; display: none !important; }
html body .recent-page-head h1,
html body .creator-profile-page-head h1,
html body .shop-header h1 {
  margin: 8px 0 14px !important; font-size: 26px !important; font-weight: 800 !important; line-height: 1.4 !important;
  letter-spacing: -.015em !important; color: var(--ds-text) !important; text-transform: none !important;
}
html body .recent-page-head p { margin: -10px 0 0 !important; font-size: 14px !important; color: var(--ds-muted) !important; }
html body :is(.creator-profile-page-head > div > span, .shop-header .shop-eyebrow) { display: none !important; }
/* Same left edge as Explore (sidebar + 20px). */
html body:not(.is-mobile-layout) .recent-page-head { padding: 24px 20px 18px !important; align-items: flex-start !important; }
html body:not(.is-mobile-layout) .recent-page-list { padding-left: 20px !important; padding-right: 20px !important; }
html body:not(.is-mobile-layout) #creatorProfileView { padding: 24px 20px !important; }
html body:not(.is-mobile-layout) .creator-profile-page-head { margin-bottom: 10px !important; }
/* Phone: the title sits in the menu row, beside the menu button, as in Explore. */
html body.is-mobile-layout .recent-page-head h1,
html body.is-mobile-layout .creator-profile-page-head h1 { font-size: 28px !important; padding-left: 52px !important; }
html body.is-mobile-layout:has(#recentConversationsView:not(.hidden)) .workspace,
html body.is-mobile-layout:has(#creatorProfileView:not(.hidden)) .workspace { padding-top: 0 !important; }
html body.is-mobile-layout #recentConversationsView,
html body.is-mobile-layout #creatorProfileView { padding: 24px 16px 28px !important; }
html body.is-mobile-layout .recent-page-head { padding: 0 0 16px !important; display: block !important; }
html body.is-mobile-layout .recent-page-head p { margin: -8px 0 16px !important; }

/* --- Search fields: one look (B2). --------------------------------------- */
html body :is(.explore-search, .recent-search, .help-docs-search) {
  display: flex !important; align-items: center !important; gap: 10px !important; box-sizing: border-box !important;
  height: var(--ds-control) !important; min-height: 0 !important; padding: 0 12px !important;
  border: 1px solid var(--ds-line) !important; border-radius: var(--ds-radius-sm) !important;
  background: var(--ds-field) !important; box-shadow: none !important;
  transition: border-color var(--ds-fast) ease, background-color var(--ds-fast) ease;
}
html body :is(.explore-search, .recent-search, .help-docs-search):focus-within { border-color: var(--ds-accent-line) !important; }
html body :is(.explore-search-icon, .tryva-search-icon) { display: grid; flex: none; width: 18px; height: 18px; color: #a7a5b2; }
html body :is(.explore-search-icon, .tryva-search-icon) svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
html body :is(.explore-search, .recent-search, .help-docs-search) input {
  flex: 1 1 auto; min-width: 0; height: 100% !important; padding: 0 !important; border: 0 !important; background: transparent !important;
  font-size: 14px !important; font-weight: 500 !important; color: var(--ds-text) !important; outline: none !important; box-shadow: none !important;
}
html body.is-mobile-layout :is(.explore-search, .recent-search, .help-docs-search) input { font-size: 16px !important; }
html body:not(.is-mobile-layout) .recent-search { width: 340px !important; }

/* Placeholders read as hints, never as entered values (C3). */
html body :is(input, textarea)::placeholder { font-weight: 400 !important; color: rgba(205, 200, 222, .46); opacity: 1; }

/* --- Buttons: one primary, one secondary (B3). ----------------------------- */
html body :is(.primary-button, .selection-start-button, #wizardNextBtn, #storyAssetNextStepBtn):not(.selected) {
  border: 0 !important; border-radius: var(--ds-radius) !important; background: var(--ds-accent-fill) !important;
  color: #fff !important; font-weight: 700 !important; box-shadow: 0 8px 22px rgba(106, 61, 240, .22) !important;
  transition: filter var(--ds-fast) ease, transform var(--ds-fast) var(--ds-ease), opacity var(--ds-fast) ease !important;
}
html body :is(.primary-button, .selection-start-button, #wizardNextBtn, #storyAssetNextStepBtn):not(.selected):hover:not(:disabled) { filter: brightness(1.07); }
html body :is(.primary-button, .selection-start-button, #wizardNextBtn, #storyAssetNextStepBtn):disabled { opacity: .45 !important; box-shadow: none !important; cursor: not-allowed !important; }
html body :is(.primary-button.selected, .secondary-button, .detail-preview-button, .ghost-button:not(#wizardNextBtn):not(#storyAssetNextStepBtn)) {
  border: 1px solid var(--ds-line) !important; border-radius: var(--ds-radius) !important; background: var(--ds-surface) !important;
  color: var(--ds-text) !important; box-shadow: none !important;
  transition: border-color var(--ds-fast) ease, background-color var(--ds-fast) ease, transform var(--ds-fast) var(--ds-ease) !important;
}
html body :is(.primary-button.selected, .secondary-button, .detail-preview-button, .ghost-button):hover:not(:disabled) { border-color: rgba(255, 255, 255, .2) !important; }
html body .modal-start-button, html body .report-send-button, html body #authSubmitBtn { border-radius: var(--ds-radius) !important; }

/* --- Owned mark: the card's small gold label everywhere (B4). -------------- */
html body #detailBadge, html body .detail-badge {
  display: inline-flex !important; align-items: center !important; height: auto !important; padding: 3px 8px !important;
  border: 1px solid rgba(232, 190, 92, .36) !important; border-radius: 6px !important; background: rgba(232, 190, 92, .14) !important;
  color: #f1d48a !important; font-size: 12px !important; font-weight: 600 !important; box-shadow: none !important; text-shadow: none !important;
}

/* --- Notices: every empty and failed area (B5, B6). ------------------------ */
.tryva-state {
  grid-column: 1 / -1; flex: 1 1 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center;
  gap: 8px; width: 100%; padding: 44px 16px; text-align: center;
}
.tryva-state-mark { position: relative; width: 30px; height: 30px; margin-bottom: 4px; border-radius: 50%; background: rgba(255, 138, 154, .14); }
.tryva-state-mark::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ds-danger); font-size: 15px; font-weight: 800; }
.tryva-state-title { color: var(--ds-text); font-size: 15px; font-weight: 600; line-height: 1.5; }
.tryva-state-detail { margin: 0; max-width: 34em; color: var(--ds-muted); font-size: 13px; line-height: 1.6; }
html body .tryva-state-action {
  margin-top: 8px; height: 36px; padding: 0 16px; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm);
  background: var(--ds-surface); color: var(--ds-text); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color var(--ds-fast) ease, background-color var(--ds-fast) ease, transform var(--ds-fast) var(--ds-ease);
}
html body .tryva-state-action:hover { border-color: var(--ds-accent-line); background: var(--ds-accent-soft); }
html body .library-empty:not(.hidden) { display: block !important; padding: 0 !important; background: none !important; border: 0 !important; }
html body .recent-page-list > .tryva-state, html body .tryva-home-recent > .tryva-state { grid-column: 1 / -1; }

/* --- Loading: one spinner, one shimmer (B7). -------------------------------- */
@keyframes ds-spin { to { rotate: 360deg; } }
html body :is(.catalog-loading-spinner, .vn-background-spinner, .vn-startup-spinner, .vn-compose-spinner, .route-boot-spinner, .composer-speech-spinner) {
  animation: ds-spin 800ms linear infinite !important; border-color: rgba(236, 232, 248, .24) !important; border-top-color: rgba(236, 232, 248, .9) !important;
}
html body .recent-room-skeleton :is(.recent-room-art, .recent-room-copy strong, .recent-room-copy small) { animation-name: tryvaCardSkeletonSweep !important; animation-duration: 1250ms !important; }
@media (prefers-reduced-motion: reduce) {
  html body :is(.catalog-loading-spinner, .vn-background-spinner, .vn-startup-spinner, .vn-compose-spinner, .route-boot-spinner, .composer-speech-spinner) { animation-duration: 2400ms !important; }
}

/* --- Icon buttons in dialogs: one size, drawn icons (B8). ------------------- */
html body :is(.tryva-detail-dialog-close, .detail-edit-menu-toggle, .account-modal-close, #closeStartModalBtn, .report-close, .problem-report-modal .account-modal-close) {
  width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; padding: 0 !important;
  display: inline-grid !important; place-items: center !important; border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-sm) !important; background: var(--ds-surface-2) !important; color: #d7d3de !important; font-size: 0 !important;
}
html body :is(.tryva-detail-dialog-close, .account-modal-close, #closeStartModalBtn, .problem-report-modal .account-modal-close)::before,
html body .detail-edit-menu-toggle::before {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--ds-icon) center / 16px 16px no-repeat; mask: var(--ds-icon) center / 16px 16px no-repeat;
}
html body :is(.tryva-detail-dialog-close, .account-modal-close, #closeStartModalBtn, .problem-report-modal .account-modal-close) {
  --ds-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}
html body .detail-edit-menu-toggle {
  --ds-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4Z'/%3E%3Cpath d='m13.5 6.5 4 4'/%3E%3C/svg%3E");
}
html body :is(.tryva-detail-dialog-close, .detail-edit-menu-toggle, .account-modal-close, #closeStartModalBtn, .problem-report-modal .account-modal-close) > * { display: none !important; }
html body :is(.tryva-detail-dialog-close, .detail-edit-menu-toggle, .account-modal-close, #closeStartModalBtn):hover { border-color: rgba(255, 255, 255, .2) !important; color: #fff !important; }
html body.is-mobile-layout :is(.tryva-detail-dialog-close, .detail-edit-menu-toggle, .account-modal-close, #closeStartModalBtn) { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; }

/* --- Dialog backdrop: every dialog dims the whole page, menu included (B9). --- */
html body :is(#settingsModal, #loginModal, #startModal, #problemReportModal, #roomTitleEditModal).modal-backdrop:not(.hidden) {
  position: fixed !important; inset: 0 !important; z-index: 1200 !important;
  background: rgba(5, 6, 12, .62) !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
}

/* --- A: defect fixes. -------------------------------------------------------- */
/* A3: while a detail dialog is open, it leaves the bottom to the selection tray. */
html body.tryva-detail-overlay-active.selection-tray-has-selection:not(.selection-tray-empty):not(.selection-tray-collapsed):not(.is-mobile-layout) :is(#characterDetailView, #storyAssetDetailView) {
  padding-bottom: calc(22px + var(--catalog-tray-reserve, 0px)) !important;
}
html body.tryva-detail-overlay-active.selection-tray-has-selection:not(.selection-tray-empty):not(.selection-tray-collapsed):not(.is-mobile-layout) .tryva-unified-detail-dialog {
  height: min(900px, calc(100dvh - 44px - var(--catalog-tray-reserve, 0px))) !important;
}
/* A4: a locked composer dims the microphone like the other controls. */
html body #userForm button[type="submit"][data-mode="mic"]:disabled { opacity: .42 !important; cursor: not-allowed !important; }
/* A7: the start button sits on a solid footer; the form fades out above it. */
html body .start-modal-footer {
  padding-top: 26px !important; margin-top: -12px !important;
  background: linear-gradient(to bottom, rgba(9, 10, 18, 0), rgb(9, 10, 18) 24px) !important;
}
/* B10: the library item menu is a plain corner icon beside edit/heart on every
   layout. PC shows it on hover or keyboard focus; touch layouts always show it. */
html body .library-view:not(.library-selection-mode) .tryva-card-corner-actions > .library-touch-menu {
  display: grid; place-items: center; position: relative; inset: auto; z-index: auto; order: -1;
  width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 0;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); transition: opacity var(--ds-fast) var(--ds-ease), background-color var(--ds-fast) var(--ds-ease);
}
html body .library-view .library-touch-menu::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body .library-view:not(.library-selection-mode) .tryva-card-corner-actions > .library-touch-menu:hover { background: #10121b60; }
html body.is-mobile-layout .library-view:not(.library-selection-mode) .tryva-card-corner-actions > .library-touch-menu { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
/* Folders have no corner icons: the same plain icon sits alone in the corner. */
html body .library-view:not(.library-selection-mode) [data-library-node] > .library-touch-menu {
  display: grid; place-items: center; position: absolute; top: 50%; right: 2px; z-index: 6; translate: 0 -50%;
  width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ds-text); font-size: 0; transition: opacity var(--ds-fast) var(--ds-ease);
}
html body.is-mobile-layout .library-view:not(.library-selection-mode) [data-library-node] > .library-touch-menu { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
html body .library-view:not(.library-selection-mode) .library-folder-tile { padding-right: 38px; }
html body.is-mobile-layout .library-view:not(.library-selection-mode) .library-folder-tile { padding-right: 44px; }
html body.is-mobile-layout .library-view:not(.library-selection-mode) [data-library-node] > .library-touch-menu { right: 0; }
/* The menu takes room from the name, so folder tiles get a little wider:
   168px on PC, two equal columns on phones. */
html body.library-active #libraryView #libraryGrid > .library-folder-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 168px)); }
html body.library-active #libraryView .library-folder-tile { width: 168px; }
html body.is-mobile-layout.library-active #libraryView #libraryGrid > .library-folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body.is-mobile-layout.library-active #libraryView .library-folder-tile { width: auto; }
@media (hover: hover) and (pointer: fine) {
  html body:not(.is-mobile-layout) .library-view [data-library-node]:not(:hover):not(:focus-within) .library-touch-menu { opacity: 0; }
}
/* Library path: plain text like the page tabs; only a drop target gets a box. */
html body .library-breadcrumbs > button { min-height: 32px; padding: 5px 6px; border-color: transparent; background: transparent; color: var(--ds-muted); font-size: 13px; font-weight: 600; transition: color var(--ds-fast) var(--ds-ease), background-color var(--ds-fast) var(--ds-ease); }
html body .library-breadcrumbs > button:hover, html body .library-breadcrumbs > button:focus-visible { border-color: transparent; background: rgba(255, 255, 255, .05); color: var(--ds-text); }
html body .library-breadcrumbs > button[aria-current="page"] { border-color: transparent; background: transparent; color: var(--ds-text); font-weight: 700; }
html body .library-breadcrumbs > button.is-library-drop-target { border-color: rgba(172, 139, 255, .82); background: rgba(124, 77, 255, .24); }
html body.is-mobile-layout .library-breadcrumbs > button { min-height: 44px; }
/* Detail tabs: plain labels; the count is quiet text beside the label, no pill. */
html body .tryva-detail-tabs button span { display: inline !important; min-width: 0 !important; height: auto !important; padding: 0 !important; border-radius: 0 !important; background: none !important; color: inherit !important; font-size: inherit !important; }
html body .tryva-detail-tabs button span[id$="Count"] { color: var(--ds-muted) !important; font-size: 12px !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; }
html body .tryva-detail-tabs button { font-size: 14px !important; transition: color var(--ds-fast) var(--ds-ease); }
html body .tryva-detail-tabs button:not(.active):hover { color: #c9c4d4 !important; }
/* C2: the stats box and the creator box share one right edge. */
html body:is(.detail-active, .story-asset-detail-active) :is(#characterDetailView, #storyAssetDetailView) :is(.detail-stats, .story-detail-stats, .tryva-unified-detail-stats) { width: 100% !important; max-width: none !important; }
/* World/scenario detail: stats and creator sit on one baseline at one height. */
html body.story-asset-detail-active #storyAssetDetailView .story-detail-stats { align-self: end !important; height: auto !important; min-height: 0 !important; }
html body.story-asset-detail-active #storyAssetDetailView .story-detail-stats > .detail-stat { min-height: 54px !important; padding-block: 6px !important; }
html body .detail-stats > .content-rating:empty { display: none !important; }
html body #featuredCharacterHero.is-collapsed { display: none !important; }
/* Icon buttons: the drawn icon owns the whole button cell, so a stray text
   node can never push it off centre. */
html body :is(.tryva-detail-dialog-close, .detail-edit-menu-toggle, .account-modal-close, #closeStartModalBtn, .report-close) {
  grid-template: 1fr / 1fr !important; grid-auto-rows: 0 !important; grid-auto-columns: 0 !important;
}
/* Settings: no eyebrow; the close button lines up with the section edge and the title. */
html body #settingsModal .settings-modal > .account-modal-head { display: flex !important; align-items: center !important; justify-content: space-between !important; padding-right: 0 !important; }
html body .settings-modal > .account-modal-head > div > span:first-child:not(:only-child) { display: none !important; }
html body .settings-modal > .account-modal-head h2 { margin: 0 !important; }
html body #settingsModal .settings-modal > .account-modal-head > .account-modal-close { position: static !important; inset: auto !important; transform: none !important; margin: 0 !important; flex: 0 0 auto; }
/* C4: section help lines share one size and tone. */
html body .settings-modal .settings-section > p:not(.hidden), html body .settings-modal #settingsLanguageHelp { font-size: 13px !important; line-height: 1.6 !important; color: var(--ds-muted) !important; margin-top: 12px !important; }
html body .settings-modal .settings-section > h3 { font-size: 15px !important; font-weight: 700 !important; }
/* Phone: the sheet is as tall as its content. */
html body.is-mobile-layout .settings-modal { height: auto !important; min-height: 0 !important; }
html body #settingsModal .settings-modal > .account-modal-head > div > span:first-child:not(:only-child) { display: none !important; }
html body #settingsModal .settings-section > p:empty { display: none !important; }
html body #settingsModal .settings-section > p { margin-bottom: 0 !important; }
/* C5: report header — icon, title and close share one centre line; the close
   button ends on the form's right edge. Footer buttons share one height. */
html body .problem-report-modal > .account-modal-head { align-items: center !important; padding-right: 0 !important; }
html body .problem-report-modal > .account-modal-head > .account-modal-close { position: static !important; inset: auto !important; margin: 0 0 0 auto !important; transform: none !important; flex: 0 0 auto; }
html body .problem-report-modal :is(.secondary-button, .primary-button) { min-height: 44px !important; }
html body.is-mobile-layout .problem-report-modal { height: auto !important; min-height: 0 !important; }
html body.is-mobile-layout .problem-report-modal { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important; border-radius: 18px 18px 0 0 !important; }
/* C6 (phone): card small text never below 11px; the add button is a 42px target. */
html body.is-mobile-layout .catalog-card-copy > p { font-size: 11px !important; }
html body.is-mobile-layout .catalog-card-copy .catalog-tag { font-size: 11px !important; }
html body.is-mobile-layout .catalog-card-copy .catalog-card-status-badge { font-size: 11px !important; }
html body.is-mobile-layout .catalog-card-copy .creator-byline { font-size: 11px !important; }
html body.is-mobile-layout .catalog-card-copy .creator-byline > span { font-size: 11px !important; }
html body.is-mobile-layout .catalog-card-add { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; }
/* Detail dialog icon buttons follow the shared icon-button size (36, phone 40). */
html body:is(.detail-active, .story-asset-detail-active) :is(#characterDetailView, #storyAssetDetailView) :is(.detail-edit-menu-toggle, .tryva-detail-dialog-close) { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; }
html body.is-mobile-layout:is(.detail-active, .story-asset-detail-active) :is(#characterDetailView, #storyAssetDetailView) :is(.detail-edit-menu-toggle, .tryva-detail-dialog-close) { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; }
/* Story cards' select button matches the character card add button on phones. */
html body.is-mobile-layout .tryva-unified-story-card-action { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; }
/* The tray handle is a comfortable touch target without looking heavier. */
html body.is-mobile-layout #selectionTrayToggle { min-height: 34px !important; height: 34px !important; width: 64px !important; }
/* C3: the create flow's "다음" is the one primary action on the page. */
html body:is(.create-active, .story-asset-create-active) :is(#createView, #storyAssetCreateView) :is(#characterForm, #storyAssetCreateForm) > .story-asset-create-actions > :is(#wizardNextBtn, #storyAssetNextStepBtn) {
  border: 0 !important; border-radius: var(--ds-radius) !important; background: var(--ds-accent-fill) !important; color: #fff !important;
  font-weight: 700 !important; box-shadow: 0 8px 22px rgba(106, 61, 240, .22) !important; min-width: 120px !important;
}
html body:is(.create-active, .story-asset-create-active) :is(#createView, #storyAssetCreateView) :is(#characterForm, #storyAssetCreateForm) > .story-asset-create-actions > :is(#wizardNextBtn, #storyAssetNextStepBtn):disabled { opacity: .45 !important; box-shadow: none !important; }
/* Page title without eyebrow, like the other pages. */
html body .story-asset-create-head > div > span:first-child:not(:only-child) { display: none !important; }
/* Progress panel: a quiet checklist, not a second form. Status lines are text. */
html body .creator-progress-item { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
html body .creator-progress-item.is-current { background: rgba(139, 92, 246, .08) !important; border-color: rgba(139, 92, 246, .32) !important; }
html body .creator-progress-item:hover:not(.is-current) { background: rgba(255, 255, 255, .03) !important; }
html body .creator-progress-copy small { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; color: var(--ds-muted) !important; font-size: 12px !important; }
html body .creator-progress-identity small { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; color: var(--ds-muted) !important; font-size: 12px !important; }
/* The step list already marks where you are; the extra "다음 단계" note repeated it. */
html body .story-asset-create-steps > .story-asset-create-next { display: none !important; }
/* Phone step chips: with the hint line hidden, the label centres on the number. */
html body.is-mobile-layout [data-create-step] > strong { grid-row: 1 / 3 !important; align-self: center !important; }
html body.is-mobile-layout [data-create-step] > span:first-child { align-self: center !important; }
html body.is-mobile-layout [data-create-step] { column-gap: 8px !important; }
html body.is-mobile-layout [data-story-step-button] > strong { grid-row: 1 / 3 !important; align-self: center !important; }
html body.is-mobile-layout [data-story-step-button] > span:first-child { align-self: center !important; }
/* Creator page title reads like every other page title. */
html body .creator-profile-page-head h1 > span { font: inherit !important; color: inherit !important; letter-spacing: inherit !important; text-transform: none !important; }
html body .creator-profile-page-head h1 { color: var(--ds-text) !important; font-size: 26px !important; font-weight: 800 !important; letter-spacing: -.015em !important; line-height: 1.2 !important; height: auto !important; }

/* Phone page heads: one rule. Content starts 16px from the edge, and the page
   title sits in the menu button's row (same top, same height, centred). */
html body.is-mobile-layout:not(.chat-active):not(.create-active):not(.story-asset-create-active):not(.library-active) .workspace:has(> :is(#recentConversationsView, #creatorProfileView, #pointShopView):not(.hidden)) { padding-top: 0 !important; }
html body.is-mobile-layout :is(#recentConversationsView, #creatorProfileView, #pointShopView) { padding-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; margin-top: 0 !important; }
html body.is-mobile-layout #allCharactersView { padding-top: 0 !important; }
html body.is-mobile-layout #libraryView .library-title-row { padding-top: 0 !important; }
html body.is-mobile-layout :is(#allCharactersView .explore-title, #libraryView .library-title-row h1, .recent-page-head h1, .creator-profile-page-head h1, .shop-header h1) {
  display: flex !important; align-items: center !important; min-height: 46px !important; height: auto !important;
  margin: calc(12px + env(safe-area-inset-top, 0px)) 0 14px !important; padding: 0 0 0 52px !important;
  font-size: 26px !important; line-height: 1.2 !important;
}
html body.is-mobile-layout :is(.recent-page-head, .creator-profile-page-head, .shop-header) { padding-top: 0 !important; margin-top: 0 !important; }
html body.is-mobile-layout .recent-page-head p { margin: -6px 0 14px !important; }
html body.is-mobile-layout .shop-header .shop-eyebrow { display: none !important; }
/* Explore: its title margin would collapse through the view, so the view carries the top gap. */
html body.is-mobile-layout #allCharactersView { padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important; }
html body.is-mobile-layout #allCharactersView.view > .explore-title.explore-title { margin-top: 0 !important; }
html body.is-mobile-layout :is(.creator-profile-page-head, .shop-header) { margin-bottom: 0 !important; padding-bottom: 0 !important; }
html body.is-mobile-layout .shop-header { align-items: flex-start !important; }
html body.is-mobile-layout .shop-header > .shop-history-link { align-self: flex-start !important; display: flex !important; align-items: center !important; min-height: 46px !important; margin-top: calc(12px + env(safe-area-inset-top, 0px)) !important; padding-top: 0 !important; padding-bottom: 0 !important; }
/* ===================== v470 motion layer (see public/js/app-motion.js) =====================
   Opacity/transform only; 120–250ms; nothing repeats; no layout shift. */
@property --ds-fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --ds-fade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* 1. Sticky bars: conversations search and creator tabs follow the page like explore. */
html body .recent-conversations-view { overflow: clip !important; }
html body .recent-toolbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-height: 52px; padding: 8px 20px; background: var(--catalog-ground, #0c0c11); border-bottom: 1px solid transparent; }
html body.is-mobile-layout .recent-toolbar { padding: 12px 0 10px 52px; min-height: 68px; margin: 0 0 4px; }
html body.is-mobile-layout .recent-toolbar > .recent-search { flex: 1 1 auto; max-width: none !important; width: auto !important; }
/* PC: the search shares the title row at rest (one grid cell), and becomes a
   full-width bar once it sticks. Phone: its own row under the subtitle. */
html body:not(.is-mobile-layout) #recentConversationsView { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
html body:not(.is-mobile-layout) #recentConversationsView > :is(.recent-page-head, .recent-toolbar) { grid-area: 1 / 1; }
html body:not(.is-mobile-layout) .recent-toolbar { align-self: start; min-height: 0; padding: 31px 20px 12px; background: transparent; pointer-events: none; transition: background-color var(--ds-mid) var(--ds-ease), box-shadow var(--ds-mid) var(--ds-ease), border-color var(--ds-mid) var(--ds-ease); }
html body:not(.is-mobile-layout) .recent-toolbar > * { pointer-events: auto; }
html body:not(.is-mobile-layout) .recent-toolbar.is-stuck { background: var(--catalog-ground, #0c0c11); }
html body.is-mobile-layout .recent-page-head p { margin-bottom: 0 !important; }
html body .creator-profile-section-head { position: sticky; top: 0; z-index: 20; padding: 10px 0 8px; margin-bottom: 12px !important; align-items: center !important; background: var(--catalog-ground, #0c0c11); border-bottom: 1px solid transparent; }
html body.is-mobile-layout .creator-profile-section-head { padding-left: 52px; min-height: 68px; }
/* The profile view scrolls inside its own 24px padding; the bar rests flush with its top. */
html body:not(.is-mobile-layout) #creatorProfileView .creator-profile-section-head { top: calc(-1 * var(--ds-creator-pad, 24px)); }
html body :is(.explore-head, .library-explore-head, .recent-toolbar, .creator-profile-section-head) {
  transition: box-shadow var(--ds-mid) var(--ds-ease), border-color var(--ds-mid) var(--ds-ease);
}
html body :is(.explore-head, .library-explore-head, .recent-toolbar, .creator-profile-section-head).is-stuck {
  border-bottom-color: var(--ds-line) !important; box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .9);
}

/* 2. The large title fades as it slides under the bar (inline style from JS);
   wide layouts then show a small centred copy inside the bar. */
html body :is(#allCharactersView > .explore-title, #libraryView .library-title-row > h1, .recent-page-head h1, .creator-profile-page-head h1) { transform-origin: left center; will-change: auto; }
html body .ds-compact-title {
  position: absolute; left: 50%; top: 50%; max-width: 32%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ds-text); font-size: 14px; font-weight: 700; letter-spacing: -.01em; pointer-events: none;
  opacity: 0; transform: translate(-50%, calc(-50% + 4px)); transition: opacity var(--ds-mid) var(--ds-ease), transform var(--ds-mid) var(--ds-ease);
}
html body .is-stuck > .ds-compact-title { opacity: 1; transform: translate(-50%, -50%); }
html body.is-mobile-layout .ds-compact-title { display: none; }

/* 3. Detail sheet: the header carries the name and a heart once the name is gone. */
html body .tryva-detail-dialog-head > .ds-detail-mini-name {
  position: absolute; left: 50%; top: 50%; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ds-text); font-size: 15px; font-weight: 700; pointer-events: none;
  opacity: 0; transform: translate(-50%, calc(-50% + 5px)); transition: opacity var(--ds-mid) var(--ds-ease), transform var(--ds-mid) var(--ds-ease);
}
html body .tryva-detail-dialog-head > h2 { transition: opacity var(--ds-fast) ease, transform var(--ds-mid) var(--ds-ease); }
html body .tryva-detail-dialog-head.is-condensed > h2 { opacity: 0; transform: translateY(-5px); }
html body .tryva-detail-dialog-head.is-condensed > .ds-detail-mini-name { opacity: 1; transform: translate(-50%, -50%); }
html body.is-mobile-layout .tryva-detail-dialog-head > .ds-detail-mini-name { left: 20px; max-width: calc(100% - 200px); transform: translate(0, calc(-50% + 5px)); text-align: left; }
html body.is-mobile-layout .tryva-detail-dialog-head.is-condensed > .ds-detail-mini-name { transform: translate(0, -50%); }
html body .ds-detail-mini-heart {
  display: inline-grid; place-items: center; width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 2px 0 0; margin: 0;
  border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm); background: var(--ds-surface-2); color: #d7d3de; font-size: 17px; line-height: 1;
  opacity: 0; visibility: hidden; transform: scale(.9); transition: opacity var(--ds-mid) var(--ds-ease), transform var(--ds-mid) var(--ds-ease), visibility 0s linear var(--ds-mid);
}
html body .ds-detail-mini-heart.is-wishlisted { color: #d5baff; }
html body .ds-detail-mini-heart[hidden] { display: none; }
html body .is-condensed .ds-detail-mini-heart { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
html body.is-mobile-layout .ds-detail-mini-heart { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }

/* 4. Card rails: edges fade where more cards wait; arrows only on hover (mouse). */
html body .tryva-home-card-carousel > :is(.home-catalog-rail, .tryva-story-showcase) {
  --ds-fade-l: 0px; --ds-fade-r: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ds-fade-l), #000 calc(100% - var(--ds-fade-r)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--ds-fade-l), #000 calc(100% - var(--ds-fade-r)), transparent 100%);
  transition: --ds-fade-l var(--ds-mid) ease, --ds-fade-r var(--ds-mid) ease;
}
html body .tryva-home-card-carousel.has-overflow:not(.at-start) > :is(.home-catalog-rail, .tryva-story-showcase) { --ds-fade-l: 48px; }
html body .tryva-home-card-carousel.has-overflow:not(.at-end) > :is(.home-catalog-rail, .tryva-story-showcase) { --ds-fade-r: 48px; }
html body.is-mobile-layout .tryva-home-card-carousel.has-overflow:not(.at-start) > :is(.home-catalog-rail, .tryva-story-showcase) { --ds-fade-l: 20px; }
html body.is-mobile-layout .tryva-home-card-carousel.has-overflow:not(.at-end) > :is(.home-catalog-rail, .tryva-story-showcase) { --ds-fade-r: 28px; }
html body .tryva-home-card-carousel > [data-home-card-rail-prev] { left: 6px; }
html body .tryva-home-card-carousel > [data-home-card-rail-next] { right: 6px; }
html body .tryva-home-card-carousel > :is([data-home-card-rail-prev], [data-home-card-rail-next]) {
  border-color: var(--ds-line); background: rgba(20, 20, 28, .82); box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity var(--ds-mid) var(--ds-ease), background-color var(--ds-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  html body .tryva-home-card-carousel:is(:hover, :focus-within) > :is([data-home-card-rail-prev], [data-home-card-rail-next]):not(:disabled) { opacity: 1; }
  html body .tryva-home-card-carousel > :is([data-home-card-rail-prev], [data-home-card-rail-next]):hover { background: rgba(36, 34, 48, .92); }
}
@media not ((hover: hover) and (pointer: fine)) {
  html body .tryva-home-card-carousel > :is([data-home-card-rail-prev], [data-home-card-rail-next]) { display: none !important; }
}

/* 5. Sliding tab underline: the tab's own underline hides once the shared bar exists. */
html body .has-ds-indicator > :is(.active, [aria-selected="true"])::after { opacity: 0 !important; }
html body .ds-tab-indicator { position: absolute; left: 0; top: 0; width: 1px; pointer-events: none; transform-origin: 0 0; border-radius: 2px; z-index: 1; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html body :is(.ds-compact-title, .ds-detail-mini-name, .ds-detail-mini-heart, .tryva-detail-dialog-head > h2, .ds-tab-indicator) { transition: none !important; }
  html body .tryva-home-card-carousel > :is(.home-catalog-rail, .tryva-story-showcase) { transition: none; }
}
/* Phone conversation rows: the two 44px actions sit side by side (they overlapped). */
html body.is-mobile-portrait .sidebar-recent-item > .sidebar-recent-title-edit { right: 58px !important; }
/* The compact title never inherits a bar's own badge styles. */
html body .ds-compact-title.ds-compact-title { display: block; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; line-height: 1.3; }
html body.is-mobile-layout .ds-compact-title.ds-compact-title { display: none; }
html body .creator-profile-section-head > .library-tabs { padding-bottom: 8px; margin-bottom: -8px; }
html.tryva-no-home-banner body #featuredCharacterHero { display: none !important; }
html body.is-mobile-layout #recentRoomList.recent-page-list { padding-left: 0 !important; padding-right: 0 !important; }
/* Phone landscape: the folder path gets its own row like portrait (it was squeezed beside the tabs). */
html body.is-mobile-layout.library-active #libraryView > .library-explore-head { display: block !important; }
/* ===================== v471 motion: every open and close =====================
   Same rule as v470: opacity and transform only (translate/scale compose with
   any transform an element already has), 120–250ms, once, no layout shift,
   nothing under "reduce motion". Opening plays a keyframe when the element
   starts to show; closing keeps a hidden overlay drawn for the fade
   (display ... allow-discrete). A browser without that simply closes at once.
   In-page content (tabs, steps, help pages) only fades in: the old content
   leaves at once so nothing is ever drawn twice in the flow. */
@keyframes dsFadeIn { from { opacity: 0; } }
@keyframes dsMenuIn { from { opacity: 0; translate: 0 -4px; scale: .98; } }
@keyframes dsSheetIn { from { opacity: 0; translate: 0 8px; } }
@keyframes dsTrayIn { from { opacity: 0; translate: 0 12px; } }

@media (prefers-reduced-motion: no-preference) {
  /* Dialogs: settings, login, conversation setup, profile edit, confirm. */
  html body :is(.modal-backdrop, .account-modal-backdrop, .creator-profile-edit-backdrop, .site-dialog-backdrop) {
    transition: opacity 160ms ease, display 160ms allow-discrete !important;
  }
  html body :is(.modal-backdrop, .account-modal-backdrop, .creator-profile-edit-backdrop, .site-dialog-backdrop).hidden {
    opacity: 0 !important; pointer-events: none !important;
  }
  html body :is(.modal-backdrop, .account-modal-backdrop, .creator-profile-edit-backdrop, .site-dialog-backdrop) > :is(section, div) {
    transition: opacity 160ms ease, translate 160ms ease, scale 160ms ease;
  }
  html body :is(.modal-backdrop, .account-modal-backdrop, .creator-profile-edit-backdrop, .site-dialog-backdrop).hidden > :is(section, div) {
    opacity: 0; translate: 0 6px; scale: .99;
  }
  html body .site-dialog-backdrop:not(.hidden) { animation: tryvaBackdropIn 160ms ease-out; }
  html body .site-dialog-backdrop:not(.hidden) > .site-dialog-card { animation: tryvaDialogIn 200ms var(--ds-ease, ease-out); }

  /* Detail sheets close with TryvaMotion.leave (their layout depends on the
     page state, so they cannot stay drawn after it changes). */

  /* Menus: sort, library item, edit, notices. */
  html body :is(.explore-sort-menu, .library-context-menu) {
    transition: opacity 120ms ease, display 120ms allow-discrete;
  }
  html body :is(.explore-sort-menu, .library-context-menu).hidden { opacity: 0; pointer-events: none !important; }
  html body :is(.explore-sort-menu, .library-context-menu):not(.hidden),
  html body .detail-edit-menu-root.is-open .detail-edit-menu {
    transform-origin: top right; animation: dsMenuIn 150ms var(--ds-ease, ease-out);
  }
  html body .library-context-menu:not(.hidden) { transform-origin: top left; }
  html body dialog.personal-notice-dialog {
    transition: opacity 160ms ease, translate 160ms ease, display 160ms allow-discrete, overlay 160ms allow-discrete;
  }
  html body dialog.personal-notice-dialog:not([open]) { opacity: 0; translate: 0 6px; }
  html body dialog.personal-notice-dialog[open] { animation: dsSheetIn 200ms var(--ds-ease, ease-out); }
  html body dialog.personal-notice-dialog[open]::backdrop { animation: dsFadeIn 160ms ease-out; }

  /* Phone menu drawer slides; its shade fades in and out. */
  html body.is-mobile-layout .nav-shell { transition: transform 220ms var(--ds-ease, ease-out), visibility 0s linear 220ms !important; }
  html body.is-mobile-layout.mobile-nav-open .nav-shell { transition: transform 220ms var(--ds-ease, ease-out), visibility 0s !important; }
  html body.is-mobile-layout .mobile-nav-backdrop { transition: opacity 200ms ease, visibility 200ms, display 200ms allow-discrete !important; }
  html body.is-mobile-layout.mobile-nav-open .mobile-nav-backdrop { animation: dsFadeIn 200ms ease-out; }

  /* The selection tray rises in when it first appears. */
  html body #globalSelectionTray .selection-tray-panel { animation: dsTrayIn 220ms var(--ds-ease, ease-out); }

  /* In-page content: the create menu, explore panes, maker steps, the phone
     maker progress panel and the maker form when the kind changes. */
  html body #createSubmenu:not(.hidden) > * { animation: dsMenuIn 180ms var(--ds-ease, ease-out) backwards; }
  html body #createSubmenu:not(.hidden) > :nth-child(2) { animation-delay: 20ms; }
  html body #createSubmenu:not(.hidden) > :nth-child(3) { animation-delay: 40ms; }
  html body #createSubmenu:not(.hidden) > :nth-child(n+4) { animation-delay: 60ms; }
  html body .explore-pane:not(.hidden),
  html body .story-asset-step-panel.active,
  html body #storyAssetCreateForm [data-story-step]:not(.hidden),
  html body.is-mobile-layout .creator-progress-open .story-asset-create-preview { animation: dsFadeIn 200ms ease-out; }
}