/* Shifiverse — the welcome page (editorial redesign, Nov 2026). */

.wl-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 70px); align-items: center; padding-block: clamp(40px, 6vw, 80px) clamp(40px, 5vw, 64px); }
.wl-hero h1 { margin: 0 0 20px; font-size: clamp(3rem, 6.4vw, 5.6rem); font-weight: 480; line-height: 0.98; }
.wl-hero-dek { margin: 0 0 28px; max-width: 48ch; color: var(--ink-soft); font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.65; }
.wl-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.wl-hero-note { margin: 22px 0 0; color: var(--muted); font-size: 0.9rem; }
.wl-hero-note b { color: var(--ink); }

.wl-hero-collage { position: relative; height: clamp(380px, 42vw, 560px); }
.wl-pic { position: absolute; overflow: hidden; border-radius: var(--radius); background: var(--surface-soft); box-shadow: 0 26px 60px rgba(42, 50, 32, 0.2); }
.wl-pic img, .wl-pic .sv-art { width: 100%; height: 100%; object-fit: cover; }
.wl-pic--a { left: 8%; top: 4%; width: 56%; height: 74%; border-radius: 260px 260px var(--radius) var(--radius); z-index: 2; }
.wl-pic--b { right: 0; top: 0; width: 34%; height: 42%; transform: rotate(3deg); }
.wl-pic--c { right: 4%; bottom: 0; width: 32%; height: 50%; border-radius: 6px; transform: rotate(-2deg); z-index: 3; }
.wl-pic--d { left: 0; bottom: 2%; width: 30%; height: 34%; transform: rotate(-4deg); z-index: 3; }
.wl-pic-cap { position: absolute; right: 16px; bottom: 16px; white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: rgba(255, 252, 245, 0.92); font-size: 0.78rem; font-weight: 700; color: var(--ink); }
.wl-sticker { position: absolute; left: 44%; top: 0; z-index: 4; display: grid; place-items: center; width: 118px; height: 118px; padding: 14px; border-radius: 50%; background: var(--saffron); color: var(--ink); text-align: center; font: 600 0.92rem/1.15 var(--display); transform: rotate(-10deg); box-shadow: 0 12px 26px rgba(120, 70, 0, 0.25); }
.wl-sticker em { color: var(--ink); }

.wl-strip { overflow: hidden; background: var(--forest); color: #efe9da; }
.wl-strip .container { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; padding-block: 18px; font: italic 440 clamp(1.05rem, 1.8vw, 1.35rem)/1.3 var(--display); }
.wl-strip i { font-style: normal; color: var(--saffron); }

.wl-door .sv-card-line { -webkit-line-clamp: 2; }
.wl-door-go { color: var(--ink); font-weight: 650; }

.wl-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.wl-rules article { padding: 26px; border-radius: var(--radius); background: var(--paper); }
.wl-rules span { font: italic 500 2rem/1 var(--display); color: var(--saffron); }
.wl-rules h3 { margin: 14px 0 8px; font-size: 1.25rem; }
.wl-rules p { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.6; }

.wl-close { display: grid; justify-items: center; text-align: center; padding-block: clamp(50px, 7vw, 90px); }
.wl-close h2 { margin: 0 0 24px; font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 500; }

/* the old static seat form (only when the game rooms aren't set up) */
.gathering-section .seat-card { border-radius: var(--radius); }

@media (max-width: 900px) {
    .wl-hero { grid-template-columns: minmax(0, 1fr); }
    .wl-hero-collage { height: 360px; max-width: 520px; width: 100%; justify-self: center; }
    .wl-rules { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
    .wl-hero h1 { font-size: clamp(2.6rem, 12vw, 3.4rem); }
    .wl-hero-collage { height: 300px; }
    .wl-sticker { width: 92px; height: 92px; font-size: 0.78rem; }
    .wl-pic-cap { display: none; } /* the small picture covers it on a phone */
}