body.world-selection {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    color: #e4e7ea;
    background: linear-gradient(180deg, #08132040, #08132066 45%, #08111be6), url('/assets/ui/world-selection/world-selection-bg.webp') center top / cover fixed;
    background-color: #0b1521;
    font-family: "Segoe UI", sans-serif;
}
.selection-content { width: min(1280px, calc(100% - 64px)); margin: 0 auto; flex: 1; position: relative; }
.selection-content main { position: relative; padding-bottom: 64px !important; }
.selection-heading { text-align: center; padding: 22px 0 20px; text-shadow: 0 2px 14px #000b; }
.selection-heading h1 { font: 500 clamp(32px, 3vw, 44px)/1.15 Georgia, serif; color: #f0e6d1; margin: 0; }
.selection-heading::after { content: ""; display: block; width: 110px; height: 1px; margin: 12px auto 0; background: linear-gradient(90deg, transparent, #cfad69, transparent); }
.world-categories { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; }
.world-category { padding: 20px; min-width: 0; border: 1px solid #b2966045; border-radius: 8px; background: linear-gradient(135deg, #111f2bf5, #0e1a26f5); box-shadow: 0 8px 24px #0002; }
.category-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.category-heading > img { object-fit: contain; flex: 0 0 58px; width: 58px; height: 58px; }
.category-heading h2 { font: 500 26px Georgia, serif; color: #e6d5ad; margin: 0 0 7px; }
.category-heading p { color: #afbbc8; font-size: 13px; line-height: 1.6; margin: 0; }
.world-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 20px; }
.world-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #95805265; border-radius: 6px; background: #172432; box-shadow: 0 4px 12px #0002; }
.world-artwork { position: relative; overflow: hidden; }
.world-artwork > img { width: 100%; height: clamp(220px, 24vh, 260px); object-fit: cover; object-position: center 45%; display: block; }
.world-artwork::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, #172432); pointer-events: none; }
.world-type { position: absolute; z-index: 1; left: 16px; top: 14px; font-size: 10px; letter-spacing: .12em; padding: 4px 8px; background: #101923df; border: 1px solid #c3a36390; border-radius: 3px; color: #eed6a0; }
.world-card-content { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.world-card h3 { font: 500 23px/1.25 Georgia, serif; color: #eee1c5; overflow-wrap: anywhere; margin: 0 0 6px; }
.world-created { color: #bbc5d0; font-size: 12px; margin-bottom: 12px; }
.world-created time { display: inline-block; color: #dce0e4; font-variant-numeric: tabular-nums; }
.world-actions { margin-top: auto; display: grid; }
.world-selection .world-button { display: flex; justify-content: center; align-items: center; gap: 14px; min-height: 42px; padding: 10px; text-decoration: none; font-size: 13px; font-weight: 600; border-radius: 4px; transition: background-color .15s, border-color .15s; }
.world-selection .world-button-primary { background: #252b2b; color: #ecd39c; border: 1px solid #b89958; }
.world-selection .world-button-primary:hover { background: #3a3b30; border-color: #e2c17b; }
.world-selection a:focus-visible, .selection-utilities button:focus-visible { outline: 2px solid #e7c985; outline-offset: 3px; }
.world-category-pve { display: flex; flex-direction: column; }
.world-empty { text-align: center; padding: 42px 8px; margin: auto 0; }
.world-empty img { object-fit: contain; margin-bottom: 24px; opacity: .85; }
.world-empty h3 { font: 500 20px/1.5 Georgia, serif; color: #d9d4c8; margin: 0 auto 12px; max-width: 260px; }
.world-empty p { font-size: 13px; color: #a5b2c0; line-height: 1.7; max-width: 240px; margin: auto; }
.selection-message, .world-selection .alert-danger { color: #f3d1c9; background: #36242c; border: 1px solid #98615c; border-radius: 4px; padding: 16px; overflow-wrap: anywhere; }
.world-selection .selection-footer { background: #09121ded; border-top: 1px solid #aa8b4d30; color: #929eab; padding: 20px 0; font-size: 12px; text-align: center; }
.world-selection .selection-footer a { color: #c8b991; text-decoration: none; }
.world-selection .selection-footer a:hover { text-decoration: underline; color: #f0dbad; }
.selection-utilities { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-bottom: 12px; }
.selection-utilities button { border: 1px solid #8e7b5466; background: #18232e; color: #d2c093; border-radius: 4px; padding: 5px 10px; }
.selection-utilities strong { color: #d2b477; font-size: 10px; }
.selection-utilities [data-devmode-status] { color: #f3b2a7; }
@media (max-width: 1050px) {
    .world-categories { grid-template-columns: minmax(0, 1fr); }
    .world-empty { padding: 28px 8px; }
}
@media (max-width: 600px) {
    .selection-content { width: calc(100% - 28px); }
    .world-category { padding: 18px; }
    .selection-heading { padding: 18px 8px 16px; }
    .world-artwork > img { height: clamp(160px, 48vw, 220px); }
    .category-heading { gap: 10px; }
    .selection-content main { padding-bottom: 32px !important; }
    body.world-selection { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) { .world-selection .world-button { transition: none; } }