/* TRYVA responsive shell r1
   Breakpoints follow available viewport width, not device or user-agent:
   phone / tablet portrait < 840, tablet landscape / compact desktop 840-1439,
   full desktop >= 1440. */

.mobile-insight-toggle,
.mobile-insight-close,
.chat-insight-backdrop {
  display: none;
}

@media (max-width: 1439px) {
  :root {
    --tryva-desktop-site-width: 100% !important;
    --tryva-sidebar-width: clamp(220px, 22vw, 252px) !important;
    --tryva-page-gutter: clamp(20px, 3vw, 34px);
  }

  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  html {
    min-height: 100%;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  body {
    min-height: var(--tryva-app-height, 100dvh) !important;
    overscroll-behavior-y: auto;
  }

  body.chat-active,
  body.detail-active,
  body.create-active {
    overscroll-behavior-y: none;
  }

  .app-shell {
    display: grid !important;
    grid-template-columns: var(--tryva-sidebar-width) minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: var(--tryva-app-height, 100dvh) !important;
    overflow: clip !important;
  }

  .workspace {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 30px var(--tryva-page-gutter) 112px !important;
    overflow-x: clip !important;
  }

  body.chat-active .workspace,
  body.detail-active .workspace,
  body.create-active .workspace {
    height: var(--tryva-app-height, 100dvh) !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body:not(.chat-active):not(.detail-active):not(.create-active) .workspace {
    overflow-x: clip !important;
    overflow-y: auto !important;
  }

  .view,
  .play-view,
  .all-characters-view,
  .library-view,
  .recent-conversations-view,
  .creator-profile-view,
  .story-view {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Tablet navigation keeps the names and utility actions visible. */
  .nav-shell {
    position: sticky !important;
    inset: 0 auto auto 0 !important;
    z-index: 90 !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, 100dvh) !important;
    padding: 18px 14px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: none !important;
    transition: none !important;
  }

  .nav-shell .brand-mark {
    justify-content: flex-start !important;
    min-height: 48px !important;
    margin: 0 0 20px !important;
    padding: 0 12px !important;
  }

  .nav-shell .brand-name,
  .nav-shell .nav-item > span:not(.nav-icon):not(.nav-chevron),
  .nav-shell .nav-util > span:not(.nav-icon),
  .nav-shell .nav-chevron,
  .nav-shell .account-copy,
  .nav-shell .account-chevron {
    display: initial !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .nav-shell .nav-menu,
  .nav-shell .nav-utility {
    gap: 8px !important;
  }

  .nav-shell .nav-item,
  .nav-shell .nav-util,
  .nav-shell .account-card {
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 0 12px !important;
  }

  .nav-shell .account-card {
    margin-top: 8px !important;
  }

  .nav-shell .account-avatar {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
  }

  .nav-create-submenu {
    position: static !important;
    z-index: auto !important;
    width: 100% !important;
    max-height: none !important;
    margin: 5px 0 8px !important;
  }

  .sidebar-recent-title-edit,
  .sidebar-recent-delete,
  .recent-page-list .sidebar-recent-title-edit,
  .recent-page-list .sidebar-recent-delete {
    z-index: 8 !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  /* General touch and type safety. */
  button,
  [role="button"],
  input,
  select,
  textarea {
    touch-action: manipulation;
  }

  .explore-tab,
  .explore-filter-btn,
  .explore-sort-btn,
  .explore-gender-toolbar button,
  .explore-segment button,
  .story-library-tools button,
  .story-library-tools label,
  .recent-filter-row button {
    min-height: 44px !important;
  }

  .tile-heart,
  .add-card-button,
  .catalog-card-heart,
  .catalog-card-add,
  .catalog-card-edit,
  .sidebar-recent-delete {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Home */
  body.play-active #playView .tryva-home-layout,
  body.play-active #playView .tryva-home-main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .tryva-welcome-copy h1 {
    font-size: clamp(27px, 4vw, 38px) !important;
  }

  body.play-active #featuredCharacterHero.tryva-featured-hero {
    width: 100% !important;
    height: clamp(230px, 28vw, 300px) !important;
    min-height: 230px !important;
    max-height: 300px !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: 100% !important;
    max-width: 100% !important;
  }

  body.play-active #playView .tryva-home-card-carousel {
    overflow: hidden !important;
  }

  body.play-active #playView .character-grid {
    max-width: 100% !important;
  }

  

  /* Explore, library and creator profile */
  .all-characters-view,
  .library-view,
  .creator-profile-view,
  .recent-conversations-view {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .explore-head,
  .explore-pane,
  .creator-profile-page-head,
  .creator-profile-hero,
  .creator-profile-character-section,
  .library-view > .page-head,
  .library-toolbar,
  .recent-page-head,
  .recent-filter-row {
    width: 100% !important;
    max-width: none !important;
  }

  .explore-suggest {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  body.all-characters-active #allCharacterGrid.all-character-grid,
  body.library-active #libraryView > #libraryGrid.library-grid,
  body.creator-profile-active
    #creatorProfileCharacterGrid.creator-profile-character-grid {


    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  

  /* Story library and composer */
  .story-view {
    padding: 0 !important;
  }

  .story-library-head {
    align-items: flex-start !important;
  }

  .story-library-layout {
    grid-template-columns: 1fr !important;
  }

  .story-scenario-detail {
    position: static !important;
  }

  .story-asset-create-main {
    grid-template-columns: 176px minmax(0, 1fr) !important;
  }

  .story-asset-create-preview,
  body.create-active #createView .cw-preview-panel.story-asset-create-preview {
    display: none !important;
  }

  .story-asset-create-form,
  body.create-active #createView .cw-main.story-asset-create-form {
    min-width: 0 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .story-field-grid.two,
  .story-check-grid,
  .story-permission-list,
  .story-asset-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Character detail: landscape tablet keeps two columns with a smaller copy rail. */
  body.detail-active .character-detail-view,
  body.detail-active .detail-hero {
    width: 100% !important;
    max-width: 100% !important;
    height: var(--tryva-app-height, 100dvh) !important;
  }

  body.detail-active .detail-hero {
    grid-template-columns: minmax(0, 1fr) minmax(390px, 46vw) !important;
  }

  body.detail-active .detail-copy {
    padding: 30px 26px 112px !important;
  }

  body.detail-active .detail-actions {
    width: clamp(390px, 46vw, 552px) !important;
    padding: 14px 24px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Chat: tablet uses a useful secondary rail instead of the fixed desktop width. */
  body.chat-active .chat-view {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 32vw, 356px) !important;
    width: 100% !important;
    height: var(--tryva-app-height, 100dvh) !important;
  }

  body.chat-active .chat-header {
    padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
  }

  body.chat-active .user-form {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Creator: preserve the editor coordinate systems; only rearrange their shells. */
  body.create-active #createView.character-wizard,
  body.create-active #storyAssetCreateView.story-asset-create-view {
    width: 100% !important;
    max-width: 100% !important;
    height: var(--tryva-app-height, 100dvh) !important;
  }

  body.create-active #createView.character-wizard .cw-page-head,
  body.create-active #storyAssetCreateView .story-asset-create-head {
    min-height: 78px !important;
  }

  body.create-active #createView.character-wizard .cw-main {
    min-width: 0 !important;
  }

  body.create-active #createView.character-wizard .cw-preview-panel {
    width: clamp(250px, 28vw, 320px) !important;
  }

  /* Dialogs must fit split-screen widths. */
  .modal-backdrop,
  .account-modal-backdrop,
  .detail-game-preview-backdrop,
  .creator-profile-edit-backdrop {
    padding: max(16px, env(safe-area-inset-top, 0px))
      max(16px, env(safe-area-inset-right, 0px))
      max(16px, env(safe-area-inset-bottom, 0px))
      max(16px, env(safe-area-inset-left, 0px)) !important;
  }

  .account-modal,
  .start-modal,
  .detail-game-preview-modal,
  .creator-profile-edit-modal,
  .chat-sprite-editor-modal {
    max-width: min(92vw, 760px) !important;
    max-height: min(92dvh, var(--tryva-visual-height, 92dvh)) !important;
  }
}

@media (max-width: 839px) {
  :root {
    --tryva-sidebar-width: 0px !important;
    --tryva-mobile-gutter: clamp(12px, 3.8vw, 18px);
    --tryva-page-gutter: var(--tryva-mobile-gutter);
  }

  .app-shell {
    display: block !important;
    grid-template-columns: none !important;
  }

  .workspace {
    padding: calc(68px + env(safe-area-inset-top, 0px))
      var(--tryva-mobile-gutter) calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-nav-toggle {
    position: fixed !important;
    z-index: 151 !important;
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    left: calc(12px + env(safe-area-inset-left, 0px)) !important;
    display: inline-grid !important;
    visibility: visible !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    place-items: center !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 14px !important;
    background: rgba(15, 13, 24, 0.92) !important;
    color: #fff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(16px) !important;
    pointer-events: auto !important;
  }

  .mobile-nav-backdrop {
    position: fixed !important;
    z-index: 148 !important;
    inset: 0 !important;
    display: block !important;
    visibility: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    background: rgba(2, 2, 7, 0.66) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition:
      opacity 0.2s ease,
      visibility 0.2s ease !important;
  }

  body.mobile-nav-open .mobile-nav-backdrop {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.mobile-nav-open {
    overflow: hidden !important;
  }

  .nav-shell {
    position: fixed !important;
    z-index: 150 !important;
    inset: 0 auto 0 0 !important;
    width: min(82vw, 310px) !important;
    min-width: min(82vw, 310px) !important;
    max-width: min(82vw, 310px) !important;
    height: var(--tryva-app-height, 100dvh) !important;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 16px
      calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translate3d(-105%, 0, 0) !important;
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    pointer-events: auto !important;
  }

  body.mobile-nav-open .nav-shell {
    transform: translate3d(0, 0, 0) !important;
  }

  .nav-shell .brand-mark {
    justify-content: flex-start !important;
    padding: 0 12px !important;
  }

  .nav-shell .brand-name,
  .nav-shell .nav-item > span:not(.nav-icon),
  .nav-shell .nav-util > span:not(.nav-icon),
  .nav-shell .nav-chevron,
  .nav-shell .account-copy,
  .nav-shell .account-chevron {
    display: initial !important;
  }

  .nav-shell .nav-item,
  .nav-shell .nav-util,
  .nav-shell .account-card {
    justify-content: flex-start !important;
    gap: 12px !important;
    min-height: 48px !important;
    padding: 0 14px !important;
  }

  .nav-create-submenu {
    position: static !important;
    width: 100% !important;
    margin: 6px 0 4px !important;
  }

  /* Mobile feeds */
  .tryva-welcome-copy h1 {
    font-size: clamp(23px, 7vw, 31px) !important;
  }

  .tryva-welcome-copy p {
    font-size: 14px !important;
  }

  body.play-active #featuredCharacterHero.tryva-featured-hero {
    height: clamp(220px, 58vw, 290px) !important;
    min-height: 220px !important;
    max-height: 290px !important;
  }

  body.play-active #featuredCharacterHero .tryva-featured-copy {
    inset: auto 16px 18px 16px !important;
    width: auto !important;
    max-width: 82% !important;
  }

  body.play-active #featuredCharacterHero .tryva-featured-copy h2 {
    font-size: clamp(25px, 8vw, 35px) !important;
  }

  body.play-active #featuredCharacterHero .tryva-featured-copy p {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 12px !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body.play-active #playView .section-head {
    align-items: center !important;
    gap: 12px !important;
  }

  body.play-active #playView .section-head h2,
  .mini-rail-head h2 {
    font-size: 20px !important;
  }

  

  

  .tryva-home-card-arrow {
    display: none !important;
  }

  body.play-active #playView .tryva-home-card-carousel {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.play-active #playView .tryva-home-card-carousel::-webkit-scrollbar {
    display: none !important;
  }

  body.play-active #playView .character-grid {
    width: max-content !important;
    max-width: none !important;
    padding-right: var(--tryva-mobile-gutter) !important;
  }

  body.play-active #playView .character-grid .character-tile {
    scroll-snap-align: start !important;
  }

  /* Search and filters remain usable at narrow widths. */
  .explore-title {
    font-size: 28px !important;
  }

  .explore-tabs {
    gap: 18px !important;
    overflow-x: auto !important;
  }

  .explore-pane {
    padding-top: 20px !important;
  }

  .explore-search {
    height: 50px !important;
    padding: 0 14px !important;
  }

  .explore-suggest {
    grid-template-columns: 1fr !important;
    max-height: min(66dvh, 560px) !important;
    padding: 16px !important;
    overflow-y: auto !important;
  }

  .explore-controls-row,
  .explore-rank-controls,
  .story-library-head,
  .recent-page-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .explore-gender-toolbar,
  .explore-segment,
  .explore-controls-right,
  .story-library-tools,
  .recent-search {
    width: 100% !important;
    min-width: 0 !important;
  }

  .explore-gender-toolbar,
  .explore-segment {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 1fr !important;
  }

  .explore-controls-right > *,
  .explore-sort,
  .explore-filter-btn,
  .explore-sort-btn {
    flex: 1 !important;
  }

  .explore-filter-panel {
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: min(88dvh, var(--tryva-visual-height, 88dvh)) !important;
    border-radius: 22px 22px 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  .explore-rank-podium {
    gap: 8px !important;
  }

  .explore-rank-table-head,
  .explore-rank-row {
    grid-template-columns: 44px minmax(0, 1fr) 72px !important;
  }

  .explore-rank-table-head > :nth-child(4),
  .explore-rank-row > :nth-child(4) {
    display: none !important;
  }



  

  .catalog-card-copy h3,
  body.all-characters-active #allCharacterGrid .catalog-card-copy h3,
  body.creator-profile-active
    #creatorProfileCharacterGrid
    .catalog-card-copy
    h3 {
    font-size: clamp(18px, 5.5vw, 23px) !important;
  }

  .catalog-card-hover {
    display: none !important;
  }

  .catalog-card:hover .catalog-card-copy,
  .catalog-card:focus-visible .catalog-card-copy,
  .catalog-card.selected .catalog-card-copy {
    opacity: 1 !important;
  }

  .creator-profile-hero {
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 18px !important;
  }

  .creator-profile-stat {
    grid-column: 1 / -1 !important;
  }

  /* Recent rooms */
  .recent-page-head {
    padding: 0 0 16px !important;
  }

  .recent-page-list {
    grid-template-columns: 1fr !important;
    height: auto !important;
    padding: 16px 0 24px !important;
    overflow: visible !important;
  }

  .recent-page-list .sidebar-recent-delete {
    width: 44px !important;
    height: 44px !important;
  }

  /* Story */
  .story-library-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  

  .story-scenario-cover {
    height: clamp(124px, 36vw, 168px) !important;
  }

  .story-start-slot-card,
  .story-scenario-detail-actions,
  .story-field-grid.two,
  .story-check-grid,
  .story-permission-list,
  .story-asset-link-grid {
    grid-template-columns: 1fr !important;
  }

  /* Phone detail page: art above scrollable copy, sticky action bar. */
  body.detail-active .character-detail-view {
    overflow: hidden !important;
  }

  body.detail-active .detail-hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: clamp(280px, 46dvh, 460px) minmax(0, 1fr) !important;
    height: var(--tryva-app-height, 100dvh) !important;
  }

  body.detail-active .detail-art {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body.detail-active .detail-copy {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: auto !important;
    padding: 22px var(--tryva-mobile-gutter)
      calc(106px + env(safe-area-inset-bottom, 0px)) !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  body.detail-active .detail-copy h1 {
    font-size: clamp(27px, 8vw, 34px) !important;
  }

  body.detail-active .detail-stats {
    gap: 8px !important;
  }

  body.detail-active .detail-stats > span {
    min-width: 0 !important;
    padding: 12px 10px !important;
  }

  body.detail-active .detail-stats strong {
    font-size: 18px !important;
  }

  body.detail-active .detail-actions {
    position: fixed !important;
    z-index: 45 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 0.9fr) minmax(0, 1.35fr) !important;
    width: 100% !important;
    padding: 10px var(--tryva-mobile-gutter)
      calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.detail-active .detail-actions button {
    height: 48px !important;
    min-height: 48px !important;
    padding-inline: 10px !important;
  }

  body.detail-active .detail-owner-tools {
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    right: calc(12px + env(safe-area-inset-right, 0px)) !important;
  }

  body.detail-active .detail-quote-card {
    right: var(--tryva-mobile-gutter) !important;
    bottom: var(--tryva-mobile-gutter) !important;
    left: var(--tryva-mobile-gutter) !important;
  }

  /* Mobile chat: full stage plus an accessible slide-over log/summary sheet. */
  body.chat-active .mobile-nav-toggle {
    display: none !important;
  }

  body.chat-active .chat-view {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    height: var(--tryva-app-height, 100dvh) !important;
  }

  body.chat-active .chat-panel {
    width: 100% !important;
    height: var(--tryva-app-height, 100dvh) !important;
  }

  body.chat-active .chat-header {
    min-height: calc(58px + env(safe-area-inset-top, 0px)) !important;
    gap: 9px !important;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px !important;
  }

  body.chat-active .chat-title-block {
    min-width: 0 !important;
  }

  body.chat-active .chat-title-block h2,
  body.chat-active .chat-title-block p {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.chat-active .chat-header .round-button,
  body.chat-active .chat-header .tool-button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
  }

  body.chat-active #fullscreenBtn {
    display: none !important;
  }

  body.chat-active .mobile-insight-toggle {
    display: inline-grid !important;
    place-items: center !important;
  }

  body.chat-active .chat-secondary-actions {
    position: absolute !important;
    z-index: 42 !important;
    top: calc(64px + env(safe-area-inset-top, 0px)) !important;
    right: 8px !important;
    min-height: 0 !important;
    padding: 0 !important;
    opacity: 0.55 !important;
  }

  body.chat-active .chat-secondary-actions .chat-reset-button {
    min-width: 62px !important;
    min-height: 40px !important;
  }

  body.chat-active .user-form,
  body.chat-active .user-form.has-contact {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.chat-active .user-form.has-contact {
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
  }

  body.chat-active .input-mode-btn,
  body.chat-active .contact-btn,
  body.chat-active .user-form > button:last-child {
    width: 44px !important;
    min-width: 44px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
  }

  body.chat-active .user-form textarea {
    min-height: 46px !important;
    max-height: min(140px, 28dvh) !important;
    padding: 12px !important;
    font-size: 16px !important;
  }

  body.chat-active .chat-insight-backdrop {
    position: fixed !important;
    z-index: 198 !important;
    inset: 0 !important;
    display: block !important;
    visibility: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    background: rgba(0, 0, 0, 0.58) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition:
      opacity 0.2s ease,
      visibility 0.2s ease !important;
  }

  body.chat-active .insight-panel {
    position: fixed !important;
    z-index: 200 !important;
    inset: auto 0 0 0 !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: min(78dvh, var(--tryva-visual-height, 78dvh)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    transform: translate3d(0, 105%, 0) !important;
    transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  }

  body.chat-active .mobile-insight-close {
    position: absolute !important;
    z-index: 3 !important;
    top: 8px !important;
    right: 8px !important;
    display: grid !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
    font-size: 24px !important;
  }

  body.chat-active .insight-tabs {
    padding-right: 56px !important;
    overflow-x: auto !important;
  }

  body.chat-active .chat-view.show-insight .insight-panel {
    transform: translate3d(0, 0, 0) !important;
  }

  body.chat-active .chat-view.show-insight .chat-insight-backdrop {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.mobile-insight-open {
    overflow: hidden !important;
  }

  /* Mobile creators: one readable column with persistent actions. */
  body.create-active .mobile-nav-toggle {
    display: inline-grid !important;
  }

  body.create-active #createView.character-wizard,
  body.create-active #storyAssetCreateView.story-asset-create-view {
    overflow: hidden !important;
  }

  body.create-active #createView.character-wizard .cw-page-head,
  body.create-active #storyAssetCreateView .story-asset-create-head {
    min-height: calc(68px + env(safe-area-inset-top, 0px)) !important;
    padding: calc(10px + env(safe-area-inset-top, 0px))
      var(--tryva-mobile-gutter) 10px 68px !important;
  }

  body.create-active #createView.character-wizard .cw-page-head p,
  body.create-active #storyAssetCreateView .story-asset-create-head p {
    display: none !important;
  }

  body.create-active #createView #characterForm.cw-shell,
  body.create-active #storyAssetCreateView .story-asset-create-main {
    display: block !important;
    height: calc(
      var(--tryva-app-height, 100dvh) - 68px - env(safe-area-inset-top, 0px)
    ) !important;
    overflow-y: auto !important;
  }

  body.create-active #createView .cw-step-column,
  body.create-active #storyAssetCreateView .story-asset-create-steps {
    position: sticky !important;
    z-index: 15 !important;
    top: 0 !important;
    display: flex !important;
    width: 100% !important;
    padding: 8px var(--tryva-mobile-gutter) !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(14, 12, 22, 0.96) !important;
    scrollbar-width: none !important;
  }

  body.create-active #createView .cw-step-column::-webkit-scrollbar,
  body.create-active
    #storyAssetCreateView
    .story-asset-create-steps::-webkit-scrollbar {
    display: none !important;
  }

  body.create-active #createView .cw-step,
  body.create-active #storyAssetCreateView .story-asset-step {
    flex: 0 0 auto !important;
    min-width: 104px !important;
    min-height: 48px !important;
  }

  body.create-active #createView .cw-main,
  body.create-active #storyAssetCreateView .story-asset-create-form {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 18px var(--tryva-mobile-gutter)
      calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: visible !important;
  }

  body.create-active #createView .cw-step-panel {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.create-active #createView .cw-preview-panel,
  body.create-active #storyAssetCreateView .story-asset-create-preview {
    display: none !important;
  }

  body.create-active #createView .cw-footer,
  body.create-active #storyAssetCreateView .story-asset-create-actions {
    position: fixed !important;
    z-index: 40 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    min-height: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 10px var(--tryva-mobile-gutter)
      calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
    background: rgba(13, 11, 20, 0.96) !important;
    backdrop-filter: blur(18px) !important;
  }

  body.create-active #createView .cw-footer button,
  body.create-active #storyAssetCreateView .story-asset-create-actions button {
    min-height: 46px !important;
  }

  body.create-active
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
      [type="file"]
    ),
  body.create-active textarea,
  body.create-active select,
  .modal-backdrop input,
  .modal-backdrop textarea,
  .modal-backdrop select {
    font-size: 16px !important;
  }

  .story-inline-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .story-inline-head > button {
    width: 100% !important;
    min-height: 44px !important;
  }

  /* Phone dialogs become sheets/full-height panels and respect the visual viewport. */
  .modal-backdrop,
  .account-modal-backdrop,
  .detail-game-preview-backdrop,
  .creator-profile-edit-backdrop {
    align-items: flex-end !important;
    padding: max(8px, env(safe-area-inset-top, 0px)) 0 0 !important;
  }

  .account-modal,
  .start-modal,
  .detail-game-preview-modal,
  .creator-profile-edit-modal,
  .chat-sprite-editor-modal,
  .character-story-picker-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: var(--tryva-visual-height, 96dvh) !important;
    margin: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

@media (max-width: 479px) {


  .catalog-card-copy,
  body.all-characters-active #allCharacterGrid .catalog-card-copy,
  body.creator-profile-active #creatorProfileCharacterGrid .catalog-card-copy {
    padding: 12px !important;
  }

  .catalog-card-copy p,
  .catalog-card-tags span:nth-child(n + 3) {
    display: none !important;
  }

  

  body.detail-active .detail-actions .detail-group-add-button {
    font-size: 0 !important;
  }

  body.detail-active .detail-actions .detail-group-add-button::before {
    content: "＋";
    font-size: 20px;
  }

  body.chat-active .chat-title-block p {
    display: none !important;
  }
}

@media (max-height: 479px) and (orientation: landscape) and (max-width: 932px) {
  :root {
    --tryva-sidebar-width: 0px !important;
  }

  .app-shell {
    display: block !important;
    grid-template-columns: none !important;
  }

  .workspace {
    padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
  }

  .mobile-nav-toggle {
    top: calc(6px + env(safe-area-inset-top, 0px)) !important;
    left: calc(8px + env(safe-area-inset-left, 0px)) !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    display: inline-grid !important;
    visibility: visible !important;
    place-items: center !important;
    pointer-events: auto !important;
  }

  .mobile-nav-backdrop {
    position: fixed !important;
    z-index: 148 !important;
    inset: 0 !important;
    display: block !important;
    visibility: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    background: rgba(2, 2, 7, 0.66) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.mobile-nav-open .mobile-nav-backdrop {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .nav-shell {
    position: fixed !important;
    z-index: 150 !important;
    inset: 0 auto 0 0 !important;
    width: min(46vw, 310px) !important;
    min-width: min(46vw, 310px) !important;
    max-width: min(46vw, 310px) !important;
    height: var(--tryva-app-height, 100dvh) !important;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px
      calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translate3d(-105%, 0, 0) !important;
    transition: transform 0.2s ease !important;
  }

  body.mobile-nav-open .nav-shell {
    transform: translate3d(0, 0, 0) !important;
  }

  .nav-shell .brand-name,
  .nav-shell .nav-item > span:not(.nav-icon),
  .nav-shell .nav-util > span:not(.nav-icon),
  .nav-shell .nav-chevron,
  .nav-shell .account-copy,
  .nav-shell .account-chevron {
    display: initial !important;
  }

  .nav-shell .nav-item,
  .nav-shell .nav-util,
  .nav-shell .account-card {
    justify-content: flex-start !important;
    gap: 10px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
  }

  body.detail-active .detail-hero {
    grid-template-columns: 46vw minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
  }

  body.detail-active .detail-art {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body.detail-active .detail-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding-top: 16px !important;
  }

  body.detail-active .detail-quote-card {
    display: none !important;
  }

  body.chat-active .chat-header {
    min-height: calc(48px + env(safe-area-inset-top, 0px)) !important;
    padding-top: calc(3px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 3px !important;
  }

  body.chat-active .mobile-nav-toggle {
    display: none !important;
  }

  body.chat-active .chat-view {
    grid-template-columns: 1fr !important;
  }

  body.chat-active #fullscreenBtn {
    display: none !important;
  }

  body.chat-active .mobile-insight-toggle {
    display: inline-grid !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    place-items: center !important;
    padding: 0 !important;
  }

  body.chat-active .chat-insight-backdrop {
    position: fixed !important;
    z-index: 198 !important;
    inset: 0 !important;
    display: block !important;
    visibility: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    background: rgba(0, 0, 0, 0.58) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.chat-active .chat-secondary-actions {
    top: calc(51px + env(safe-area-inset-top, 0px)) !important;
  }

  body.chat-active .vn-dialogue-box {
    min-height: 74px !important;
    padding-top: 20px !important;
    padding-bottom: 10px !important;
  }

  body.chat-active .user-form,
  body.chat-active .user-form.has-contact {
    padding-top: 5px !important;
    padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.chat-active .user-form textarea {
    min-height: 42px !important;
    max-height: 82px !important;
  }

  body.chat-active .insight-panel {
    inset: 0 0 0 auto !important;
    width: min(72vw, 430px) !important;
    height: var(--tryva-app-height, 100dvh) !important;
    border-radius: 20px 0 0 20px !important;
    transform: translate3d(105%, 0, 0) !important;
  }

  body.chat-active .mobile-insight-close {
    position: absolute !important;
    z-index: 3 !important;
    top: 6px !important;
    right: 6px !important;
    display: grid !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
  }

  body.chat-active .chat-view.show-insight .insight-panel {
    transform: translate3d(0, 0, 0) !important;
  }

  body.chat-active .chat-view.show-insight .chat-insight-backdrop {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Only phone-sized layouts use the labelled drawer. Tablets keep the
   in-flow labelled sidebar from the 1439px foundation above. The short
   landscape clause covers wide phones without misclassifying iPad landscape. */
@media (max-width: 839px), (max-height: 479px) and (orientation: landscape) and (max-width: 932px) {
  :root {
    --tryva-sidebar-width: 0px !important;
  }

  .app-shell {
    display: block !important;
    grid-template-columns: none !important;
  }

  /* 이 구간은 nav 을 fixed 드로어로 빼면서도 grid 는 236px 사이드바 열을
     그대로 잡고 있었다. nav 이 흐름에서 빠지면 in-flow 자식은 .workspace
     하나뿐이라, .workspace 가 1fr 열이 아니라 236px 열에 들어간다. 그 안에서
     .detail-hero 의 minmax(0,1fr) 640px 는 1fr 을 0 으로 눌러, 캐릭터 상세의
     이미지 칸이 중간 폭 구간에서 0 이 됐다(실측). 바로 위
     .app-shell 규칙은 명시도가 낮아 styles.css 의
     body.detail-active .app-shell{display:grid} 에 밀린다. 같은 명시도로
     다시 쓴다. */
  body.detail-active .app-shell,
  body.story-asset-detail-active .app-shell {
    display: block !important;
    grid-template-columns: none !important;
  }

  /* :root 에 0px 을 !important 로 걸어도 styles.css 가 body 노드에 236px 를
     선언해 상속으로 이긴다. !important 는 상속을 넘지 못한다. 같은 노드에
     다시 선언해야 실제로 0 이 된다. 안 그러면 선택 트레이가 있지도 않은
     사이드바 폭만큼 밀린다. */
  body.detail-active,
  body.story-asset-detail-active {
    --tryva-sidebar-width: 0px !important;
  }

  body:not(.chat-active):not(.detail-active):not(.create-active) .workspace {
    padding-top: calc(78px + env(safe-area-inset-top, 0px)) !important;
  }

  .mobile-nav-toggle {
    position: fixed !important;
    z-index: 151 !important;
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    left: calc(12px + env(safe-area-inset-left, 0px)) !important;
    display: inline-grid !important;
    visibility: visible !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    place-items: center !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 14px !important;
    background: rgba(15, 13, 24, 0.94) !important;
    color: #fff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    pointer-events: auto !important;
  }

  .mobile-nav-backdrop {
    position: fixed !important;
    z-index: 148 !important;
    inset: 0 !important;
    display: block !important;
    visibility: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    background: rgba(2, 2, 7, 0.66) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
  }

  body.mobile-nav-open .mobile-nav-backdrop {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.mobile-nav-open {
    overflow: hidden !important;
  }

  .nav-shell {
    position: fixed !important;
    z-index: 150 !important;
    inset: 0 auto 0 0 !important;
    width: min(86vw, 340px) !important;
    min-width: min(86vw, 340px) !important;
    max-width: min(86vw, 340px) !important;
    height: var(--tryva-app-height, 100dvh) !important;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 16px
      calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: translate3d(-105%, 0, 0) !important;
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    pointer-events: auto !important;
  }

  body.mobile-nav-open .nav-shell {
    transform: translate3d(0, 0, 0) !important;
  }

  .nav-shell .brand-mark,
  .nav-shell .nav-item,
  .nav-shell .nav-util,
  .nav-shell .account-card {
    justify-content: flex-start !important;
  }

  .nav-shell .nav-item,
  .nav-shell .nav-util,
  .nav-shell .account-card {
    gap: 12px !important;
    min-height: 48px !important;
    padding: 0 14px !important;
  }

  .nav-create-submenu {
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    margin: 6px 0 4px !important;
  }

  .nav-shell .brand-name {
    display: block !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
  }

  .nav-shell .nav-item > span:not(.nav-icon):not(.nav-chevron),
  .nav-shell .nav-util > span:not(.nav-icon) {
    display: block !important;
    visibility: visible !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
    color: inherit !important;
    font-size: 14.5px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    opacity: 1 !important;
  }

  .nav-shell .nav-chevron {
    display: inline-flex !important;
    visibility: visible !important;
    flex: 0 0 auto !important;
    opacity: 1 !important;
  }

  .nav-shell .account-copy {
    display: flex !important;
    visibility: visible !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    opacity: 1 !important;
  }

  .nav-shell .account-chevron {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Character maker: actual story-asset DOM, one scroll surface, fixed actions. */
  body.create-active #createView.character-wizard.story-asset-create-view {
    display: block !important;
    width: 100% !important;
    height: var(--tryva-app-height, 100dvh) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.create-active #createView.character-wizard.story-asset-create-view.hidden {
    display: none !important;
  }

  body.create-active #createView .story-asset-create-head {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: calc(72px + env(safe-area-inset-top, 0px)) !important;
    height: auto !important;
    margin: 0 !important;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px 72px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: #111019 !important;
  }

  body.create-active #createView .story-asset-create-head > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  body.create-active #createView .story-asset-create-head > div > span,
  body.create-active #createView .story-asset-create-head > div > p {
    display: none !important;
  }

  body.create-active #createView .story-asset-create-head h1 {
    margin: 0 !important;
    overflow: hidden !important;
    font-size: clamp(18px, 3.2vw, 23px) !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.create-active #createView #backToPlayBtn {
    flex: 0 0 auto !important;
    min-width: 64px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
  }

  body.create-active #createView .story-asset-create-main {
    display: block !important;
    width: 100% !important;
    height: calc(var(--tryva-app-height, 100dvh) - 72px - env(safe-area-inset-top, 0px)) !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.create-active #createView .story-asset-create-steps {
    position: sticky !important;
    z-index: 15 !important;
    top: 0 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(14, 12, 22, 0.97) !important;
    scrollbar-width: none !important;
  }

  body.create-active #createView .story-asset-create-steps::-webkit-scrollbar {
    display: none !important;
  }

  body.create-active #createView .story-asset-create-step-list {
    display: flex !important;
    width: max-content !important;
    min-width: 100% !important;
    gap: 8px !important;
  }

  body.create-active #createView .story-asset-create-step-list > button {
    flex: 0 0 auto !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    width: auto !important;
    min-width: 118px !important;
    min-height: 48px !important;
    padding: 8px 10px !important;
  }

  body.create-active #createView .story-asset-create-step-list > button > span {
    width: 27px !important;
    min-width: 27px !important;
    height: 27px !important;
  }

  body.create-active #createView .story-asset-create-step-list > button > small,
  body.create-active #createView .story-asset-create-next {
    display: none !important;
  }

  body.create-active #createView #characterForm.story-asset-create-form {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 20px clamp(14px, 3vw, 28px)
      calc(104px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: visible !important;
  }

  body.create-active #createView [data-step-panel],
  body.create-active #createView [data-step-panel].active {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.create-active #createView [data-step-panel]:not(.active) {
    display: none !important;
  }

  body.create-active #createView .story-asset-create-preview {
    display: none !important;
  }

  body.create-active #createView .story-asset-create-actions {
    position: fixed !important;
    z-index: 40 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    padding: 10px clamp(14px, 3vw, 28px)
      calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
    background: rgba(13, 11, 20, 0.97) !important;
  }

  body.create-active #createView .story-asset-create-actions > button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 46px !important;
    margin: 0 !important;
  }

  body.create-active #createView .story-field-grid.two,
  body.create-active #createView .cw-two-column-settings,
  body.create-active #createView .cw-image-grid,
  body.create-active #createView .creator-attribution-options,
  body.create-active #createView .character-world-position-grid,
  body.create-active #createView .cw-category-options {
    grid-template-columns: 1fr !important;
  }

  body.create-active #createView .cw-writing-card,
  body.create-active #createView .cw-image-card,
  body.create-active #createView .cw-samples-card,
  body.create-active #createView .character-story-settings-card,
  body.create-active #createView .cw-magic-row {
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(14px, 2.5vw, 20px) !important;
    overflow: hidden !important;
  }

  body.create-active #createView .cw-split-media-actions,
  body.create-active #createView .cw-crop-tools,
  body.create-active #createView .cw-inline-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  body.create-active #createView .cw-split-media-actions > button,
  body.create-active #createView .cw-crop-tools > button,
  body.create-active #createView .cw-inline-actions > button {
    flex: 1 1 132px !important;
    min-height: 44px !important;
  }

  body.create-active #createView .wizard-runtime-sprite-host,
  body.create-active #createView .emotion-runtime-sprite-host,
  body.create-active #createView .direct-sprite-placement-board,
  body.create-active #createView #standingCropFrame {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.create-active #createView #standingCropFrame.is-empty-placement {
    min-height: clamp(280px, 54vw, 480px) !important;
  }

  body.create-active #createView img,
  body.create-active #createView video,
  body.create-active #createView canvas,
  body.create-active #createView svg {
    max-width: 100% !important;
  }

  body.create-active #createView
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  body.create-active #createView textarea,
  body.create-active #createView select {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }
}

@media (min-width: 700px) and (max-width: 1439px) {
  body.create-active #createView .story-field-grid.two,
  body.create-active #createView .cw-two-column-settings,
  body.create-active #createView .creator-attribution-options,
  body.create-active #createView .character-world-position-grid,
  body.create-active #createView .cw-category-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 599px) {
  body.create-active #createView .story-asset-create-head {
    padding-right: 12px !important;
  }

  body.create-active #createView .story-asset-create-step-list > button {
    min-width: 106px !important;
  }

  body.create-active #createView .cw-magic-row,
  body.create-active #createView .cw-section-title-row,
  body.create-active #createView .cw-image-card-head,
  body.create-active #createView .character-story-link-toolbar,
  body.create-active #createView .character-story-settings-head {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body.create-active #createView .cw-magic-row button,
  body.create-active #createView .character-story-link-toolbar button {
    width: 100% !important;
    min-height: 44px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav-backdrop,
  .nav-shell,
  .chat-insight-backdrop,
  .insight-panel {
    transition: none !important;
  }
}

/* TRYVA responsive shell r2
   One final cross-device contract. It intentionally changes only viewport,
   safe-area, input and touch behavior; card/image/video geometry is untouched. */
@media (max-width: 1439px) {
  html,
  body {
    min-height: 100%;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  .app-shell {
    overflow: hidden !important;
  }

  @supports (overflow: clip) {
    .app-shell {
      overflow: clip !important;
    }
  }

  body:not(.chat-active):not(.detail-active):not(.create-active) .workspace {
    padding-left: max(var(--tryva-page-gutter, 16px), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--tryva-page-gutter, 16px), env(safe-area-inset-right, 0px)) !important;
  }

  .nav-shell {
    padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
  }

  body.chat-active .chat-header {
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
  }

  body.chat-active .user-form,
  body.chat-active .user-form.has-contact {
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
  }

  body.detail-active .detail-copy {
    padding-left: max(var(--tryva-mobile-gutter, 18px), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--tryva-mobile-gutter, 18px), env(safe-area-inset-right, 0px)) !important;
  }

  body.detail-active .detail-actions,
  body.create-active #createView .cw-footer,
  body.create-active #createView .story-asset-create-actions,
  body.create-active #storyAssetCreateView .story-asset-create-actions {
    padding-left: max(var(--tryva-mobile-gutter, 16px), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--tryva-mobile-gutter, 16px), env(safe-area-inset-right, 0px)) !important;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select {
    font-size: 16px !important;
  }

  .workspace,
  .nav-shell,
  .detail-copy,
  .messages,
  .insight-panel,
  .story-asset-create-main,
  .story-asset-create-steps,
  .cw-step-column,
  .modal-backdrop > * {
    -webkit-overflow-scrolling: touch;
  }
}

@media (hover: none), (pointer: coarse) {
  button,
  [role="button"],
  .nav-item,
  .nav-util,
  .account-card,
  .explore-tab,
  .catalog-card,
  .character-tile {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .tile-heart,
  .catalog-card-heart,
  .catalog-card-add,
  .catalog-card-edit,
  .sidebar-recent-title-edit,
  .sidebar-recent-delete {
    visibility: visible !important;
    min-width: 44px !important;
    min-height: 44px !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .catalog-card-hover {
    display: none !important;
  }

  .character-tile:hover,
  .catalog-card:hover,
  .tryva-story-showcase-card:hover,
  .recent-room-card:hover {
    transform: none !important;
  }
}

@media (max-width: 359px) {
  :root {
    --tryva-mobile-gutter: 10px;
  }



  
}

/* ============================================================================
   v5.34.72.165 · TOUCH DRAWER STACK + RESPONSIVE CARD SCALE

   - The compact drawer must participate in the root stacking context. The
     backdrop is a body child while the nav is inside .app-shell; keeping the
     shell at z-index:2 traps the nav below the backdrop and leaves only a dim,
     untouchable page.
   - Tablet and phone cards keep the canonical desktop aspect ratios but use a
     smaller physical scale. Home rails and public grids consume the same size
     tokens so no surface can silently stretch a card back to desktop size.
   ============================================================================ */
@media (min-width: 840px) and (max-width: 1439px) {
  :root {
    --tryva-card-w: 190px;
    --tryva-story-card-width: 310px;
    --tryva-catalogue-gap: 10px;
  }

  /* Keep Home on the same full-width story surface as Explore. Capping the
     carousel itself to exactly two cards made the pair look cramped and
     centered even though the numeric gap happened to match. */
  body.play-active #playView .tryva-story-showcase-carousel {
    
    
    margin-inline: 0 !important;
  }







  html body.play-active #playView .tryva-home-card-carousel > :is(#homeStoryShowcase, #homeWorldShowcase) > .tryva-unified-story-card {







    margin: 0 !important;

  }








}

/* ============================================================================
   v5.34.72.166 · PHONE-ONLY PLAY FOUNDATION
   Tablet values above are intentionally untouched. Portrait phones receive a
   rotation gate; landscape phones reuse the same 1667x900 logical VN canvas
   as fullscreen, so saved sprite placement and dialogue geometry do not drift.
   ============================================================================ */
.phone-play-orientation-gate {
  display: none;
}

@media (max-width: 599px), (max-height: 479px) and (orientation: landscape) and (max-width: 932px) {
  :root {
    --tryva-card-w: 154px;
    --tryva-story-card-width: 252px;
    --tryva-catalogue-gap: 10px;
  }

  body.chat-active .nav-shell,
  body.chat-active.mobile-nav-open .nav-shell {
    visibility: hidden !important;
    transform: translate3d(-105%, 0, 0) !important;
    pointer-events: none !important;
  }

  body.chat-active .mobile-nav-backdrop,
  body.chat-active.mobile-nav-open .mobile-nav-backdrop {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.chat-active .chat-header :is(.round-button, .tool-button),
  body.chat-active .chat-secondary-actions :is(button, .tool-button),
  body.chat-active .user-form button,
  body.chat-active .mobile-insight-toggle {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  body.chat-active .chat-secondary-actions {
    gap: 6px !important;
    opacity: 0.88 !important;
  }

  body.chat-active .chat-secondary-actions :is(#dialogueScaleBtn, #resetBtn) {
    height: 44px !important;
    min-height: 44px !important;
    padding-inline: 11px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 599px) and (orientation: portrait) {
  body.chat-active.phone-play-portrait {
    overflow: hidden !important;
  }

  body.chat-active.phone-play-portrait .phone-play-orientation-gate {
    position: fixed !important;
    z-index: 2147482002 !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: max(24px, env(safe-area-inset-top, 0px)) 24px
      max(24px, env(safe-area-inset-bottom, 0px)) !important;
    background: #0c0c11 !important;
    color: #f4f1fb !important;
    text-align: center !important;
    pointer-events: auto !important;
  }

  .phone-play-orientation-icon {
    display: grid !important;
    width: 64px !important;
    height: 64px !important;
    place-items: center !important;
    margin-bottom: 4px !important;
    border: 1px solid rgba(164, 126, 255, 0.34) !important;
    border-radius: 18px !important;
    background: rgba(126, 84, 232, 0.14) !important;
    color: #bba3ff !important;
    font-size: 34px !important;
    line-height: 1 !important;
  }

  .phone-play-orientation-gate strong {
    font-size: 19px !important;
    line-height: 1.3 !important;
  }

  .phone-play-orientation-gate > span:last-child {
    color: rgba(232, 226, 244, 0.62) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
}

@media (max-height: 479px) and (orientation: landscape) and (max-width: 932px) {
  body.chat-active .vn-stage-runtime-canvas {
    --tryva-vn-dialogue-inset: 58px;
    --tryva-vn-narration-inset: 130px;
    --tryva-vn-player-width: 620px;
    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;
  }

  body.chat-active .vn-stage-runtime-canvas .vn-character,
  body.chat-active .vn-stage-runtime-canvas .vn-character:is(.speaking, .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 .vn-stage-runtime-canvas .vn-standing {
    left: calc(50% + var(--sprite-x, 0%)) !important;
    bottom: calc((100% * 28 / 720) - var(--sprite-y, 0%)) !important;
    max-width: none !important;
    max-height: none !important;
  }

  body.chat-active .vn-stage-runtime-canvas .vn-dialogue-box {
    left: var(--tryva-vn-dialogue-inset) !important;
    right: var(--tryva-vn-dialogue-inset) !important;
    bottom: 104px !important;
    width: auto !important;
    min-height: 116px !important;
    padding: 26px 34px 24px !important;
    border-radius: 20px !important;
  }

  body.chat-active .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.chat-active .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.chat-active .vn-stage-runtime-canvas .vn-dialogue-name {
    left: 26px !important;
    top: -17px !important;
    min-width: 108px !important;
    padding: 9px 18px !important;
  }

  body.chat-active .vn-stage-runtime-canvas .vn-scene-card {
    width: 860px !important;
    max-height: 440px !important;
    padding: 34px 38px 32px !important;
    border-radius: 24px !important;
  }

  body.chat-active .vn-stage-runtime-canvas .vn-presentation-text {
    font-size: 20px !important;
    line-height: 1.72 !important;
  }

  body.chat-active .vn-stage-runtime-canvas .vn-scene-card .vn-presentation-text {
    font-size: 22px !important;
    line-height: 1.8 !important;
  }
}

@media (max-width: 839px), (max-height: 479px) and (orientation: landscape) and (max-width: 932px) {
  :root {
    --tryva-card-w: 176px;
    --tryva-story-card-width: 286px;
    --tryva-catalogue-gap: 10px;
    --tryva-compact-card-w: min(
      var(--tryva-card-w),
      calc((100vw - var(--tryva-mobile-gutter, 16px) - var(--tryva-mobile-gutter, 16px) - var(--tryva-catalogue-gap)) / 2)
    );
  }

  /* Flatten only the compact shell. This lets the fixed nav's z-index sit
     above the body-level backdrop while the workspace stays below it. */
  .app-shell,
  body.detail-active .app-shell,
  body.story-asset-detail-active .app-shell,
  body.create-active .app-shell {
    position: static !important;
    z-index: auto !important;
    isolation: auto !important;
    transform: none !important;
    filter: none !important;
    contain: none !important;
    overflow: visible !important;
  }

  .mobile-nav-backdrop {
    background: rgba(2, 2, 7, 0.62) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    touch-action: manipulation !important;
  }

  .nav-shell,
  body.play-active .nav-shell {
    z-index: 150 !important;
    background: #0c0c11 !important;
    background-image: none !important;
    box-shadow: 18px 0 44px rgba(0, 0, 0, 0.42) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    touch-action: pan-y !important;
  }

  .mobile-nav-toggle {
    z-index: 151 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    touch-action: manipulation !important;
  }







  html body.play-active #playView .tryva-home-card-carousel > :is(#homeStoryShowcase, #homeWorldShowcase) > .tryva-unified-story-card {







    margin: 0 !important;

  }








}

/* v5.34.72.166 recent-room action icons.
   The SVG contract is global because the same markup is used on desktop. */
.sidebar-recent-action-icon,
.sidebar-recent-action-icon svg {
  display: block;
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.sidebar-recent-action-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* v5.34.72.166 phone-only physical card scale. */
@media (max-width: 599px), (max-height: 479px) and (orientation: landscape) and (max-width: 932px) {
  :root {
    --tryva-card-w: 154px;
    --tryva-story-card-width: 252px;
    --tryva-catalogue-gap: 10px;
  }
}

/* v5.34.72.167 tablet recent-room actions.
   This intentionally excludes phone widths; the phone shell will be redesigned
   under a separate contract. */
@media (min-width: 600px) and (max-width: 1439px) {
  .sidebar-recent-item {
    display: block !important;
    min-height: 102px !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.025) !important;
    overflow: hidden !important;
  }

  .sidebar-recent-open {
    width: 100% !important;
    min-height: 102px !important;
    padding: 10px 58px 10px 10px !important;
  }

  .sidebar-recent-title-edit,
  .sidebar-recent-delete,
  .recent-page-list .sidebar-recent-title-edit,
  .recent-page-list .sidebar-recent-delete {
    position: absolute !important;
    right: 6px !important;
    display: grid !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    place-items: center !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 11px !important;
    background: rgba(20, 19, 29, 0.92) !important;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.2) !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .sidebar-recent-title-edit,
  .recent-page-list .sidebar-recent-title-edit {
    top: 6px !important;
    color: rgba(198, 179, 255, 0.9) !important;
  }

  .sidebar-recent-delete,
  .recent-page-list .sidebar-recent-delete {
    top: auto !important;
    bottom: 6px !important;
    color: rgba(242, 174, 188, 0.84) !important;
  }

  .sidebar-recent-title-edit:active,
  .sidebar-recent-title-edit:focus-visible {
    border-color: rgba(164, 126, 255, 0.42) !important;
    background: rgba(126, 84, 232, 0.18) !important;
    color: #f5f0ff !important;
  }

  .sidebar-recent-delete:active,
  .sidebar-recent-delete:focus-visible {
    border-color: rgba(255, 126, 151, 0.36) !important;
    background: rgba(213, 64, 94, 0.16) !important;
    color: #ffdbe3 !important;
  }

  .sidebar-recent-action-icon,
  .sidebar-recent-action-icon svg {
    width: 19px !important;
    height: 19px !important;
  }

  .recent-page-list .sidebar-recent-item {
    min-height: 132px !important;
  }

  .recent-page-list .sidebar-recent-open {
    min-height: 132px !important;
    padding: 16px 66px 16px 14px !important;
  }

  .recent-page-list .sidebar-recent-title-edit,
  .recent-page-list .sidebar-recent-delete {
    right: 11px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .recent-page-list .sidebar-recent-title-edit {
    top: 13px !important;
  }

  .recent-page-list .sidebar-recent-delete {
    bottom: 13px !important;
  }
}

@media (max-width: 359px) {
  :root {
    --tryva-compact-card-w: min(var(--tryva-card-w), calc(100vw - var(--tryva-mobile-gutter, 14px) - var(--tryva-mobile-gutter, 14px)));
  }
}

/* TRYVA responsive shell r3
   Responsive behavior is the final stylesheet in the cascade. Theme and the
   shared desktop card contract are loaded first; this layer only adapts their
   physical size and arrangement to the available viewport. The shared aspect
   ratios and cover transforms remain the single geometry source. */
@media (max-width: 1439px) {
  :root {
    --tryva-mobile-inline-safe: max(
      var(--tryva-page-gutter, 16px),
      env(safe-area-inset-left, 0px),
      env(safe-area-inset-right, 0px)
    );
  }

  body,
  .app-shell,
  .workspace,
  .view,
  .page-head,
  .explore-head,
  .explore-pane,
  .library-view,
  .creator-profile-view,
  .recent-conversations-view,
  .story-view {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .page-head > *,
  .explore-head > *,
  .explore-controls-row > *,
  .library-toolbar > *,
  .recent-page-head > *,
  .story-library-head > *,
  .creator-profile-page-head > *,
  .modal-head > *,
  .account-modal-head > * {
    min-width: 0 !important;
  }

  .page-head h1,
  .explore-head h1,
  .recent-page-head h1,
  .story-library-head h1,
  .creator-profile-page-head h1,
  .modal-head h2,
  .account-modal-head h2 {
    overflow-wrap: anywhere;
  }

  /* Fixed Home-sized tracks on tablet. Phone rules below fluidly shrink the
     same cards without changing their shape or internal composition. */








  body.create-active .cw-create-card-editor-stage .simple-card-editor-viewport,
  .card-image-editor-modal:not(.story-asset-card-image-editor) .tryva-shared-card-editor-viewport,
  body.create-active #profileCropFrame.cw-create-crop-frame.profile,
  .card-image-editor-modal:not(.story-asset-card-image-editor) #cropDragFrame {
    width: min(var(--tryva-card-w), 100%) !important;
    min-width: 0 !important;
    max-width: var(--tryva-card-w) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: var(--tryva-card-aspect-ratio) !important;
  }

  .story-creator-card-editor-viewport,
  .card-image-editor-modal.story-asset-card-image-editor .tryva-shared-card-editor-viewport,
  .card-image-editor-modal.story-asset-card-image-editor #cropDragFrame {
    width: min(var(--tryva-story-card-width), 100%) !important;
    min-width: 0 !important;
    max-width: var(--tryva-story-card-width) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: var(--tryva-story-card-aspect-ratio) !important;
  }

  /* Every modal family uses the visual viewport and safe areas. This also
     covers dynamically-created alert, generated-image and crop dialogs. */
  .modal-backdrop,
  .account-modal-backdrop,
  .site-dialog-backdrop,
  .generated-visual-detail-backdrop,
  .room-generated-images-backdrop {
    box-sizing: border-box !important;
    max-width: 100vw !important;
    max-height: var(--tryva-visual-height, 100dvh) !important;
    padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .site-dialog-card,
  .generated-visual-detail-modal,
  .room-generated-images-modal,
  .card-image-editor-modal,
  .media-crop-modal,
  .emotion-media-editor-modal,
  .detail-image-editor-modal {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: min(100%, 920px) !important;
    max-height: min(92dvh, var(--tryva-visual-height, 92dvh)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 839px) {
  /* Phone and portrait-tablet catalogues use available width. Cards retain
     the exact desktop ratio; only their physical scale changes. */












  .modal-backdrop,
  .account-modal-backdrop,
  .site-dialog-backdrop,
  .generated-visual-detail-backdrop,
  .room-generated-images-backdrop {
    align-items: flex-end !important;
    padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    padding-bottom: 0 !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
  }

  .modal-backdrop > *,
  .account-modal-backdrop > *,
  .site-dialog-card,
  .generated-visual-detail-modal,
  .room-generated-images-modal,
  .card-image-editor-modal,
  .media-crop-modal,
  .emotion-media-editor-modal,
  .detail-image-editor-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: var(--tryva-visual-height, 96dvh) !important;
    margin: 0 !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 22px 22px 0 0 !important;
  }

  .modal-actions,
  .site-dialog-actions,
  .crop-editor-actions,
  .story-presentation-preview-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .modal-actions > button,
  .site-dialog-actions > button,
  .crop-editor-actions > button,
  .story-presentation-preview-actions > button {
    flex: 1 1 132px !important;
    min-width: 0 !important;
    min-height: 44px !important;
  }
}

@media (max-width: 479px) {

}

@media (min-width: 700px) and (max-width: 839px) {

}

@media (max-width: 359px) {



}

/* v5.34.72.165 final compact cascade seal. This intentionally follows r3:
   device adaptations stay last, while the shared card ratios stay untouched. */
@media (max-width: 839px), (max-height: 479px) and (orientation: landscape) and (max-width: 932px) {
  .app-shell,
  body.detail-active .app-shell,
  body.story-asset-detail-active .app-shell,
  body.create-active .app-shell {
    position: static !important;
    z-index: auto !important;
    isolation: auto !important;
    transform: none !important;
    filter: none !important;
    contain: none !important;
    overflow: visible !important;
  }

  .mobile-nav-backdrop {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .nav-shell,
  body.play-active .nav-shell {
    z-index: 150 !important;
    background: #0c0c11 !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }








}

/* v5.34.72.167 tablet visual correction.
   Keep the desktop Home banner geometry on tablet and repair the library-only
   action pair after the global touch floor enlarges each control to 44px. */
@media (min-width: 600px) {
  body.play-active #featuredCharacterHero.tryva-featured-hero {
    height: 252px !important;
    min-height: 252px !important;
    max-height: 252px !important;
  }
}

.catalog-card-edit-icon,
.catalog-card-edit-icon svg {
  display: block !important;
  width: 19px !important;
  height: 19px !important;
  pointer-events: none !important;
}

.catalog-card-edit-icon svg {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.65 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Keep the existing phone placement contract. Tablet promotes this wrapper
   into one positioned rail so the two controls never depend on paired offsets. */
.tryva-card-corner-actions {
  display: contents;
}

.tryva-card-corner-actions > :is(
  .catalog-card-heart,
  .catalog-card-edit,
  .tryva-unified-story-card-wishlist,
  .tryva-unified-story-card-edit
) {
  z-index: 10 !important;
}

/* ============================================================================
   TABLET VISUAL CORRECTION · WIDTH-DRIVEN GEOMETRY
   Tablet only: phone layouts at 839px and below remain untouched.
   - Home hero follows the available content width instead of copying PC pixels.
   - Explore and Library share one proportional card-action contract.
   - Entering the chat, including fullscreen fallback, removes the navigation
     column as well as the visible navigation element.
   ============================================================================ */
@media (min-width: 840px) and (max-width: 1439px) {
  :root {
    --tryva-tablet-card-action-size: clamp(29px, 2.2vw, 32px);
    --tryva-tablet-card-action-inset: clamp(9px, .85vw, 11px);
    --tryva-tablet-card-action-gap: clamp(6px, .6vw, 8px);
  }

  /* The normal desktop hero is visually close to a 4.25:1 strip.  Preserve
     that density as the tablet workspace narrows; only split-screen widths
     receive a small readability floor. */
  body.play-active #featuredCharacterHero.tryva-featured-hero {
    width: 100% !important;
    height: auto !important;
    min-height: 176px !important;
    max-height: 260px !important;
    aspect-ratio: 4.25 / 1 !important;
  }

  body.play-active #featuredCharacterHero .tryva-featured-copy {
    top: 50% !important;
    left: clamp(22px, 2.5vw, 34px) !important;
    right: clamp(36%, 40vw, 42%) !important;
    transform: translateY(-50%) !important;
  }

  body.play-active #featuredCharacterHero .tryva-featured-copy h2 {
    font-size: clamp(28px, 2.65vw, 36px) !important;
  }

  body.play-active #featuredCharacterHero .tryva-featured-copy p {
    margin-bottom: clamp(10px, 1.2vw, 16px) !important;
    font-size: clamp(12px, 1.05vw, 13.5px) !important;
    line-height: 1.45 !important;
  }

  body.play-active #featuredCharacterHero .tryva-featured-copy button {
    padding: clamp(9px, .9vw, 11px) clamp(17px, 1.7vw, 22px) !important;
  }

  /* Explore and Library now render the same top-right action rail. Library
     merely adds Edit to that rail; there is no second absolute coordinate. */
  body:is(.all-characters-active, .library-active) .tryva-card-corner-actions {
    position: absolute !important;
    z-index: 10 !important;
    top: var(--tryva-tablet-card-action-inset) !important;
    right: var(--tryva-tablet-card-action-inset) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: var(--tryva-tablet-card-action-gap) !important;
    width: auto !important;
    height: auto !important;
    pointer-events: none !important;
  }

  body:is(.all-characters-active, .library-active) .tryva-card-corner-actions > :is(
    .catalog-card-heart,
    .catalog-card-edit,
    .tryva-unified-story-card-wishlist,
    .tryva-unified-story-card-edit
  ) {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    flex: 0 0 var(--tryva-tablet-card-action-size) !important;
    width: var(--tryva-tablet-card-action-size) !important;
    min-width: var(--tryva-tablet-card-action-size) !important;
    max-width: var(--tryva-tablet-card-action-size) !important;
    height: var(--tryva-tablet-card-action-size) !important;
    min-height: var(--tryva-tablet-card-action-size) !important;
    max-height: var(--tryva-tablet-card-action-size) !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-size: clamp(15px, 1.25vw, 17px) !important;
    line-height: 1 !important;
    backdrop-filter: blur(10px) !important;
    transform: translateZ(0) !important;
    pointer-events: auto !important;
  }

  body:is(.all-characters-active, .library-active) .tryva-card-corner-actions > :is(
    .catalog-card-heart,
    .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;
  }

  body.library-active .tryva-card-corner-actions > :is(
    .catalog-card-edit,
    .tryva-unified-story-card-edit
  ):is(:hover, :focus-visible) {
    background: rgba(124, 92, 255, .74) !important;
    transform: translateY(-1px) !important;
  }

  .catalog-card-edit-icon,
  .catalog-card-edit-icon svg {
    width: clamp(15px, 1.25vw, 18px) !important;
    height: clamp(15px, 1.25vw, 18px) !important;
  }

  /* Chat owns the full tablet viewport.  Hiding only the nav element leaves
     the explicit grid track behind, so collapse both in the same rule. */
  body.chat-active:not(.stage-fullscreen) .app-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.chat-active .nav-shell,
  body.chat-active.mobile-nav-open .nav-shell,
  body.stage-fullscreen .nav-shell {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    pointer-events: none !important;
  }

  body.chat-active .mobile-nav-toggle,
  body.chat-active .mobile-nav-backdrop,
  body.stage-fullscreen .mobile-nav-toggle,
  body.stage-fullscreen .mobile-nav-backdrop {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.stage-fullscreen .app-shell {
    display: block !important;
    grid-template-columns: none !important;
  }
}

/* ============================================================================
   PC CARD WISHLIST PARITY
   The Explore character-card control is the single visual contract. Every
   non-phone card renderer now emits this same button class and markup.
   Library/creator cards only add Edit beside it; they never restyle Wishlist.
   ============================================================================ */
@media (min-width: 840px) {
  html body :is(
    .catalog-card,
    .character-tile,
    .tryva-unified-story-card
  ) > .tryva-card-corner-actions {
    position: absolute !important;
    z-index: 10 !important;
    top: 11px !important;
    right: 11px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: auto !important;
    height: 29px !important;
    pointer-events: none !important;
  }

  html body .tryva-card-corner-actions > :is(
    .catalog-card-edit,
    .tile-photo-edit,
    .tryva-unified-story-card-edit,
    .tryva-card-wishlist-button
  ) {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 29px !important;
    width: 29px !important;
    min-width: 29px !important;
    max-width: 29px !important;
    height: 29px !important;
    min-height: 29px !important;
    max-height: 29px !important;
    pointer-events: auto !important;
  }

  html body .tryva-card-corner-actions > .tryva-card-wishlist-button {
    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: #fff !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16) !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-align: center !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;
    will-change: transform !important;
  }

  html body .tryva-card-corner-actions > .tryva-card-wishlist-button:is(:hover, :focus-visible, :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;
  }

  html body .tryva-card-corner-actions > .tryva-card-wishlist-button.is-wishlisted {
    border-color: transparent !important;
    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;
    filter: none !important;
    text-shadow: none !important;
  }

  html body .tryva-card-corner-actions > .tryva-card-wishlist-button.is-wishlisted:is(:hover, :focus-visible, :active) {
    background: linear-gradient(145deg, rgba(193, 79, 211, .98), rgba(126, 73, 231, .98)) !important;
    transform: translateY(-1px) scale(1.08) !important;
  }

  html body .tryva-card-corner-actions > .tryva-card-wishlist-button.is-heart-popping {
    animation: tryvaHeartPop 340ms cubic-bezier(.2, .85, .24, 1) both !important;
  }
}

/* ============================================================================
   PC CARD GRID + LIBRARY EDIT CONTROL PARITY
   Explore's scenario/world grid is the spacing reference. Character, Library,
   Story and creator-profile grids all consume that same final gap value.
   Wishlist is intentionally untouched; only Library's Edit surface is sealed.
   ============================================================================ */
@media (min-width: 840px) {
  :root {
    --tryva-story-surface-gap: var(--tryva-catalogue-gap, var(--tryva-story-grid-gap, 18px));
    --tryva-pc-card-grid-gap: var(--tryva-story-surface-gap);
  }

  

  

  html body.library-active #libraryView #libraryGrid.library-grid .tryva-card-corner-actions {
    position: absolute !important;
    top: 11px !important;
    right: 11px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    
    
    pointer-events: none !important;
  }

  html body.library-active #libraryView #libraryGrid.library-grid .tryva-card-corner-actions > :is(
    .catalog-card-edit,
    .tile-photo-edit,
    .tryva-unified-story-card-edit,
    .tryva-card-wishlist-button
  ) {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 29px !important;
    width: 29px !important;
    min-width: 29px !important;
    max-width: 29px !important;
    height: 29px !important;
    min-height: 29px !important;
    max-height: 29px !important;
    margin: 0 !important;
    pointer-events: auto !important;
  }

  html body.library-active #libraryView #libraryGrid.library-grid .tryva-card-corner-actions > :is(
    .catalog-card-edit,
    .tile-photo-edit,
    .tryva-unified-story-card-edit
  ) {
    order: 1 !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: #fff !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    cursor: pointer !important;
    -webkit-backdrop-filter: blur(10px) !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;
  }

  html body.library-active #libraryView #libraryGrid.library-grid .tryva-card-corner-actions > .tryva-card-wishlist-button {
    order: 2 !important;
  }

  html body.library-active #libraryView #libraryGrid.library-grid .tryva-card-corner-actions > :is(
    .catalog-card-edit,
    .tile-photo-edit,
    .tryva-unified-story-card-edit
  ) > .catalog-card-edit-icon {
    display: grid !important;
    place-items: center !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 0 !important;
    pointer-events: none !important;
    transform: none !important;
  }

  html body.library-active #libraryView #libraryGrid.library-grid .tryva-card-corner-actions > :is(
    .catalog-card-edit,
    .tile-photo-edit,
    .tryva-unified-story-card-edit
  ) > .catalog-card-edit-icon > svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.65 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    pointer-events: none !important;
    transform: none !important;
  }

  html body.library-active #libraryView #libraryGrid.library-grid .tryva-card-corner-actions > :is(
    .catalog-card-edit,
    .tile-photo-edit,
    .tryva-unified-story-card-edit
  ):is(:hover, :focus-visible, :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;
  }
}

/* ============================================================================
   MOBILE LIBRARY CORNER ACTION PARITY
   Use the verified PC geometry on phone layouts: Edit sits immediately left
   of Wishlist, and both match the 29px microphone badge with a 6px interval.
   ============================================================================ */
@media (max-width: 839px),
       (max-height: 479px) and (orientation: landscape) and (max-width: 932px) {
  html body.library-active #libraryView #libraryGrid.library-grid .tryva-card-corner-actions {
    position: absolute !important;
    z-index: 10 !important;
    top: 11px !important;
    right: 11px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    
    
    pointer-events: none !important;
  }

  html body.library-active #libraryView #libraryGrid.library-grid .tryva-card-corner-actions > :is(
    .catalog-card-edit,
    .tile-photo-edit,
    .tryva-unified-story-card-edit,
    .tryva-card-wishlist-button
  ) {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 29px !important;
    width: 29px !important;
    min-width: 29px !important;
    max-width: 29px !important;
    height: 29px !important;
    min-height: 29px !important;
    max-height: 29px !important;
    margin: 0 !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;
    line-height: 1 !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    transform: translateZ(0) scale(1) !important;
    transform-origin: center !important;
    pointer-events: auto !important;
  }

  html body.library-active #libraryView #libraryGrid.library-grid .tryva-card-corner-actions > :is(
    .catalog-card-edit,
    .tile-photo-edit,
    .tryva-unified-story-card-edit
  ) {
    order: 1 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 0 !important;
  }

  html body.library-active #libraryView #libraryGrid.library-grid .tryva-card-corner-actions > .tryva-card-wishlist-button {
    order: 2 !important;
    display: grid !important;
    place-items: center !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    text-align: center !important;
  }

  html body.library-active #libraryView #libraryGrid.library-grid .tryva-card-corner-actions > :is(
    .catalog-card-edit,
    .tile-photo-edit,
    .tryva-unified-story-card-edit
  ) > .catalog-card-edit-icon,
  html body.library-active #libraryView #libraryGrid.library-grid .tryva-card-corner-actions > :is(
    .catalog-card-edit,
    .tile-photo-edit,
    .tryva-unified-story-card-edit
  ) > .catalog-card-edit-icon > svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 0 !important;
    pointer-events: none !important;
    transform: none !important;
  }

  html body.library-active #libraryView #libraryGrid.library-grid .tryva-card-corner-actions > :is(
    .catalog-card-edit,
    .tile-photo-edit,
    .tryva-unified-story-card-edit
  ) > .catalog-card-edit-icon > svg {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.65 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  html body.library-active #libraryView #libraryGrid.library-grid .tryva-card-corner-actions > .tryva-card-wishlist-button.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;
  }
}