/* World pickers and world pages: /tables/quick_start, /settings, /worlds, /settings/:slug. */

.quick-start-setting-form.is-recommended .cover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-card); }
.quick-start-setting-card .cover-loading, .quick-start-setting-card.is-loading .cover-summary:not(.cover-loading) { display: none; }
.quick-start-setting-card.is-loading .cover-loading { display: block; }
.quick-start-setting-card:disabled:not(.is-loading) { opacity: .6; transform: none; }

/* World art carousel: one photo at a time, swipeable without JS; image_carousel adds arrows and dots. */
.world-showcase-hero { position: relative; }
.world-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius); box-shadow: var(--shadow-card); }
.world-carousel::-webkit-scrollbar { display: none; }
.world-carousel-slide { position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: center; }
.world-showcase-art { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.world-carousel-slide > .button_to { position: absolute; top: var(--s3); right: var(--s3); }
.world-carousel-delete { opacity: 0; transition: opacity .15s; }
.world-carousel-slide:hover .world-carousel-delete, .world-carousel-delete:focus-visible { opacity: 1; }
.world-carousel-arrow { position: absolute; top: calc(50% - 20px - var(--s3)); display: none; border-radius: 50%; box-shadow: var(--shadow-card); }
.world-carousel-arrow.is-prev { left: var(--s3); }
.world-carousel-arrow.is-next { right: var(--s3); }
.world-showcase-hero.is-interactive .world-carousel-arrow { display: inline-flex; }
.world-carousel-dots { display: flex; justify-content: center; gap: var(--s2); margin-top: var(--s3); }
.world-carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rule-strong); transition: background-color .15s, transform .15s; }
.world-carousel-dot.is-active { background: var(--accent); transform: scale(1.35); }

@media (hover: none) {
  .world-carousel-delete { opacity: 1; }
}