/* Use the shared page shell, header, talk tabs and history rows. */
.world-shell { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
.worlds-page .world-shell { border: 0; border-radius: 0; box-shadow: none; }
.world-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 20px; flex-wrap: wrap; }
.world-heading small { color: var(--text-secondary); font-size: 12px; }
.world-heading a { color: var(--text-secondary); font-size: 12px; }
.world-heading .world-home-link { color: inherit; font: inherit; text-decoration: none; }
.world-intro { margin: -8px 0 24px; padding: 8px 12px; border-radius: 8px; background: #f5f5f5; color: #333333; font-size: 13px; line-height: 1.8; }
.world-intro p { margin: 0 0 8px; }
.world-intro p:not(:first-child) { margin-bottom: 0; line-height: 1.5; }
.world-intro p:last-child { margin-bottom: 0; }
.world-shell h2:not(.category-title) { margin: 24px 0 12px; color: var(--text-primary); font-size: 16px; text-align: left; overflow-wrap: anywhere; }
.world-shell h2.category-title { margin-top: 24px; text-align: left; overflow-wrap: anywhere; }
.world-shell button, .world-shell input, .world-shell textarea, .world-shell select { font-family: inherit; box-sizing: border-box; }
.world-shell button { cursor: pointer; }
.world-shell button:disabled { opacity: .55; cursor: default; }
.world-shell [hidden], #worldStatus:empty, #worldFormError:empty { display: none !important; }
#worldStatus, #worldCreate p, #worldRoomList > p { font-size: 13px; color: var(--text-secondary); }
#worldFields label { display: grid; gap: 6px; font-size: var(--modal-label-size); color: var(--modal-label-text); font-weight: var(--modal-label-weight); }
.world-shell select, .world-shell input:not([type=checkbox]), .world-shell textarea { width: 100%; padding: 12px; min-height: 44px; border: 1px solid var(--border-color); border-radius: var(--modal-control-radius); background: var(--modal-input-bg); color: var(--modal-input-text); font-size: 16px; }
.world-shell textarea { resize: vertical; min-height: 130px; }
.world-tabs button { border: 0; background: transparent; }
.world-view-tabs { gap: 4px; }
.world-view-tabs .talk-section-link { justify-content: center; min-height: 36px; padding: 9px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.world-view-tabs .talk-section-link[aria-pressed="true"] { background: #eef0f3; color: #303640; font-weight: 700; }
.world-view-tabs .talk-section-link:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.world-row { width: 100%; border: 0; background: transparent; text-align: left; }
.world-row > img { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center top; }
.world-row strong, .world-row small { display: block; }
#worldHistory { margin-bottom: 28px; }
.world-add, .world-form-actions button, #worldRetry { min-height: 44px; padding: 10px 16px; border: 1px solid var(--border-color); border-radius: 999px; background: var(--button-secondary-bg); color: var(--button-secondary-text); font-size: 13px; font-weight: 700; }
.world-add { margin: 0 0 16px; max-width: 100%; overflow-wrap: anywhere; }
.world-shell :is(button, a, input, textarea, select):focus-visible { outline: 2px solid var(--primary-accent); outline-offset: 3px; }
.world-shell dialog { box-sizing: border-box; width: min(418px, calc(100% - 32px)); max-height: 85dvh; margin: auto; padding: 24px; border: 0; border-radius: var(--modal-surface-radius); color: var(--text-primary); background: var(--modal-surface-bg); box-shadow: var(--modal-surface-shadow); overflow-y: auto; }
.world-shell dialog::backdrop { background: rgba(42, 35, 40, .4); }
.world-shell dialog h2 { margin: 0 0 20px; font-size: 18px; }
#worldFields { display: grid; gap: 16px; }
#worldFields p { margin: 0; font-size: 13px; color: var(--text-secondary); }
#worldFields label.world-choice { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 500; overflow-wrap: anywhere; }
.world-choice input { flex-shrink: 0; width: 20px; height: 20px; margin: 0; accent-color: var(--button-primary-bg); }
.world-form-actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
#worldSubmit { background: var(--button-primary-bg); border-color: var(--button-primary-bg); color: var(--button-primary-text); }
#worldSubmit:hover { background: var(--button-primary-hover-bg); }
#worldFormError { color: #b6374c; font-size: 13px; }

.world-card-list { display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; padding-top: 8px; padding-bottom: 8px; }
.world-card-list, .world-cast-series .character-slider-container { scrollbar-width: none; }
.world-card-list::-webkit-scrollbar, .world-cast-series .character-slider-container::-webkit-scrollbar { display: none; }
.world-preset.top-group-combination-card { border: 0; font-size: 16px; }
.world-preset .top-group-combination-names { white-space: normal; overflow-wrap: anywhere; }
.world-card-list.world-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; overflow: visible; }
.world-card-grid .world-card-shell, .world-card-grid .world-preset { width: 100%; min-width: 0; }
.world-card-grid .world-preset { height: auto; aspect-ratio: 16 / 25; }

#worldTabs { overflow-x: auto; scrollbar-width: none; position: relative; }
#worldTabs::-webkit-scrollbar { display: none; }
#worldContent { touch-action: pan-y pinch-zoom; }
.world-loading :is(#worldContent, #worldCreate, #worldStatus) { display: none; }
.world-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#worldSkeleton { padding-top: 8px; }
.world-skeleton-row { display: flex; gap: 14px; padding: 20px 0; animation: world-skeleton-pulse 2s ease-in-out infinite; }
.world-skeleton-avatar, .world-skeleton-lines span { display: block; background: color-mix(in srgb, var(--text-secondary) 18%, transparent); }
.world-skeleton-avatar { flex: 0 0 52px; height: 52px; border-radius: 50%; }
.world-skeleton-lines { flex: 1; min-width: 0; display: grid; gap: 12px; padding: 3px 0; }
.world-skeleton-lines span { height: 12px; border-radius: 6px; width: 90%; }
.world-skeleton-lines .world-skeleton-name { width: 28%; max-width: 120px; height: 14px; }
.world-skeleton-lines span:last-child { width: 65%; }
@keyframes world-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .world-skeleton-row { animation: none; } }

#worldPeopleStatus { color: var(--text-secondary); font-size: 13px; }
#worldPeopleStatus:empty { display: none; }
#worldPeopleList .chatted-talk-row { align-items: flex-start; padding: 16px 0; }
#worldPeopleList .chatted-talk-preview { white-space: normal; overflow-wrap: anywhere; }
#worldPeopleList .chatted-talk-heading { flex-wrap: wrap; gap: 4px 10px; }
#worldPeopleList .chatted-talk-identity { flex: 0 1 auto; }
#worldPeopleList .chatted-talk-name { white-space: normal; overflow-wrap: anywhere; }
.world-person-date { color: var(--text-secondary); font-size: 11px; white-space: nowrap; }
.world-person-mood { display: block; margin-top: 6px; color: var(--text-secondary); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }

.world-person-relation { display: block; margin-top: 5px; font-size: 12px; color: var(--text-secondary); }

.world-day-footer { display: flex; justify-content: center; margin-top: 24px; }
.world-day-footer .world-add { background: #111; border-color: #111; color: #fff; padding: 12px 28px; }
.world-day-footer .world-add:hover:not(:disabled) { background: #333; border-color: #333; }

.world-heading #createWorldButton { flex: 0 0 auto; margin-left: auto; min-height: 34px; padding: 6px 10px; font-size: 12px; }
.world-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 16px 0; }
.world-summary > div { flex: 1; min-width: 0; }
.world-shell .world-summary h2 { display: flex; align-items: center; min-height: 40px; margin: 0; }
.world-summary p { color: var(--text-secondary); font-size: 13px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0; }
#worldDescription:empty { display: none; }
.world-summary .world-add { margin: 0; }
.world-roster { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.world-roster legend, #worldFields h3 { font-size: 14px; font-weight: 700; }
#worldFields h3 { margin: 8px 0 0; }
#worldFields .world-cast-series h3 { color: #111; }
.world-cast-results { max-height: 240px; overflow-y: auto; overscroll-behavior: contain; }
.world-cast-results .world-choice { padding: 8px 0; border-bottom: 1px solid var(--border-color); }

/* Match the photo rails and name-search rows in the group member picker. */
.world-cast-series { min-width: 0; }
.world-cast-series .character-card { border: 0; padding: 0; text-align: left; }
.world-cast-series .character-card[aria-pressed="true"] { outline: 3px solid var(--primary-accent); outline-offset: 1px; }
.world-cast-meta { display: block; margin-top: 4px; font-size: 11px; line-height: 1.5; }
.world-cast-results { display: grid; gap: 8px; }
.world-cast-results:empty { display: none; }
.world-cast-results .cast-selection-search-result { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 100%; min-height: 44px; padding: 5px 8px 5px 5px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--modal-input-bg); color: var(--modal-input-text); text-align: left; }
.world-cast-results .cast-selection-search-result-image, .world-cast-results .cast-selection-search-result-initial { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: center top; }
.world-cast-results .cast-selection-search-result-initial, .world-cast-results .cast-selection-search-result-action { display: inline-flex; align-items: center; justify-content: center; background: var(--button-secondary-bg); color: var(--button-secondary-text); }
.world-cast-results .cast-selection-search-result-name { font-size: 14px; font-weight: 700; }
.world-cast-result-content { min-width: 0; overflow-wrap: anywhere; }
.world-cast-results .cast-selection-search-result-action { width: 28px; height: 28px; border-radius: 50%; font-size: 19px; }
.world-cast-results [aria-pressed="true"] { border-color: var(--primary-accent); }
.world-cast-results [aria-pressed="true"] .cast-selection-search-result-action { background: var(--button-primary-bg); color: var(--button-primary-text); }

.world-card-shell { position: relative; flex: 0 0 160px; width: 160px; }
.world-card-settings, .world-settings-button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; padding: 9px; border: 0; border-radius: 50%; cursor: pointer; }
.world-card-settings { position: absolute; top: 0; right: 0; z-index: 3; background: transparent; color: #fff; }
.world-card-settings svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.world-settings-button { background: transparent; color: var(--button-secondary-text); }
.world-card-settings svg, .world-settings-button svg { width: 22px; height: 22px; pointer-events: none; }

/* Compact forms with a close control that remains visible while scrolling. */
.world-shell dialog { padding: 18px; }
.world-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: -18px; z-index: 4; margin: -18px -18px 12px; padding: 10px 14px 6px 18px; background: var(--modal-surface-bg); }
.world-shell .world-dialog-heading h2 { margin: 0; color: #303238; font-size: 15px; font-weight: 600; line-height: 1.5; }
#worldClose { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #777b83; }
#worldClose svg { display: block; width: 18px; height: 18px; pointer-events: none; }
#worldClose:hover:not(:disabled) { color: #303238; background: #f5f5f6; }
#worldFields { gap: 12px; }
#worldFields label { gap: 4px; }
#worldFields input:not([type=checkbox]), #worldFields select, #worldFields textarea { min-height: 38px; padding: 8px 10px; }
#worldFields textarea { min-height: 80px; height: 80px; }
.world-cast-series .character-card { width: 120px; height: 180px; }
.world-cast-series .character-slider { gap: 10px; padding: 5px; }
.world-form-actions { margin-top: 14px; gap: 8px; }
.world-form-actions button { min-height: 38px; padding: 8px 14px; }

#worldFields .cast-selection-participants-heading h3 { margin: 0; color: var(--text-primary); }
#worldFields .cast-selection-participants-heading p { white-space: nowrap; font-size: 12px; }

#worldFields :is(input, textarea, select):focus { outline: none; box-shadow: none; border-color: var(--border-color); }

#worldFields .world-gender { min-width: 0; margin: 0; padding: 0; border: 0; }
#worldFields .world-gender legend { padding: 0; margin-bottom: 4px; font-size: var(--modal-label-size); color: var(--modal-label-text); font-weight: var(--modal-label-weight); }
#worldFields .world-gender-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#worldFields .world-gender-options label { position: relative; display: block; margin: 0; cursor: pointer; }
#worldFields .world-gender-options input { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; }
#worldFields .world-gender-options span { display: flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; border: 1px solid #e8e5eb; border-radius: 6px; background: #fff; color: #746e76; font-size: 14px; font-weight: 400; transition: border-color 0.15s, color 0.15s; }
@media (hover: hover) {
    #worldFields .world-gender-options label:hover span { border-color: var(--button-primary-bg); }
}
#worldFields .world-gender-options input:checked + span { border-color: var(--button-primary-bg); background: var(--modal-input-focus-ring); color: var(--button-secondary-text); font-weight: 500; }
#worldFields .world-gender-options input:focus-visible + span { outline: 2px solid var(--modal-label-text); outline-offset: 2px; }

#worldLoadMore { display: block; margin: 16px auto; }

.world-search-scope { display: flex; gap: 8px; }
.world-search-scope button { padding: 7px 16px; border: 1px solid var(--border-color); border-radius: 999px; background: var(--button-secondary-bg); color: var(--button-secondary-text); cursor: pointer; }
.world-search-scope button[aria-pressed="true"] { background: var(--button-primary-bg); color: var(--button-primary-text); border-color: var(--primary-accent); }
.world-search-message { margin: 0; font-size: 12px; color: var(--text-secondary); }
.world-search-message:empty { display: none; }

.world-cast-series--pending .character-slider { min-height: 240px; }
.world-collapsed-series { display: grid; gap: 8px; min-width: 0; }

.world-delete-section { border-top: 1px solid var(--border-color); margin-top: 12px; padding-top: 16px; }
.world-delete-button { min-height: 44px; padding: 10px 4px; border: 0; background: transparent; color: #b42332; font: inherit; font-size: 13px; cursor: pointer; }
#worldSubmit.world-delete-confirm { background: #b42332; border-color: #b42332; color: #fff; }
#worldSubmit.world-delete-confirm:hover { background: #941c29; }