/* 謎境世界總站的品牌層：讓「城市入口」與各遊戲自己的美術並存。 */
.wordmark-lockup { display: block; width: 196px; height: auto; line-height: 0; }
.wordmark-lockup img { display: block; width: 100%; height: auto; }
.site-footer .wordmark-lockup { width: 230px; }
.portal-hero { --world-x: 0px; --world-y: 0px; background: #0a0420; }
.portal-hero::before { content: ""; position: absolute; inset: -4%; z-index: -1; background: url('/assets/riddle-world-atlas.svg') center / cover no-repeat; transform: translate3d(var(--world-x), var(--world-y), 0) scale(1.035); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.portal-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(8,3,24,.93) 0%, rgba(8,3,24,.67) 48%, rgba(8,3,24,.24) 100%); pointer-events: none; }
.portal-hero-viewport { min-height: clamp(590px, 74vw, 700px); }
.portal-slide { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(280px, .62fr); width: var(--page); margin: 0 auto; align-items: center; gap: clamp(26px, 5vw, 90px); }
.portal-slide-media, .portal-slide-shade { display: none; }
.portal-slide-content { width: auto; min-height: clamp(590px, 74vw, 700px); margin: 0; padding: 136px 0 104px; }
.portal-slide-content::before { content: "WORLD INDEX · " attr(data-world-index); display: block; margin-bottom: 28px; color: #d6a641; font-family: var(--latin); font-size: 10px; letter-spacing: .22em; }
.portal-slide-content h2 { max-width: 680px; letter-spacing: -.05em; }.portal-slide-subtitle { max-width: 560px; }
.portal-slide-poster { position: relative; display: grid; aspect-ratio: 4 / 5; max-height: 450px; overflow: hidden; border: 1px solid rgba(245,223,154,.62); background: linear-gradient(145deg, rgba(93,57,139,.82), rgba(11,5,32,.96)); box-shadow: 20px 26px 0 rgba(214,166,65,.11), 0 28px 68px rgba(0,0,0,.38); transform: rotate(2deg); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.portal-slide-poster::before { content: "FEATURED CASE"; position: absolute; z-index: 2; top: 18px; left: 18px; padding: 7px 9px; border: 1px solid rgba(245,223,154,.55); background: rgba(10,4,32,.72); color: #f5df9a; font-family: var(--latin); font-size: 9px; letter-spacing: .18em; }.portal-slide-poster::after { content: ""; position: absolute; inset: 0; border: 8px solid rgba(10,4,32,.31); pointer-events: none; }
.portal-slide-poster img { width: 100%; height: 100%; object-fit: cover; opacity: .82; filter: saturate(.82) contrast(1.05); }.portal-slide-poster:not(.has-image) { background: linear-gradient(145deg, rgba(87,51,138,.88), rgba(15,7,42,.98)), url('/assets/riddle-world-atlas.svg') center / cover; }
.portal-hero:hover .portal-slide.is-active .portal-slide-poster, .portal-slide:focus-within .portal-slide-poster { transform: rotate(0deg) translateY(-7px); box-shadow: 26px 34px 0 rgba(214,166,65,.16), 0 32px 80px rgba(0,0,0,.45); }.carousel-arrow { z-index: 4; }.carousel-arrow-next { right: max(24px, calc((100vw - var(--page)) / 2)); }.carousel-arrow-prev { left: max(24px, calc((100vw - var(--page)) / 2)); }
@media (max-width: 900px) { .menu-toggle { place-content: center; border: 1px solid rgba(245,223,154,.52); }.menu-toggle span { background: #f5df9a; }.portal-hero-viewport, .portal-slide-content { min-height: 650px; }.portal-slide { grid-template-columns: 1fr; align-content: center; gap: 0; }.portal-slide-content { z-index: 1; padding-bottom: 54px; }.portal-slide-poster { position: absolute; right: 0; bottom: 34px; width: min(31vw, 218px); max-height: 285px; opacity: .72; }.portal-hero::after { background: linear-gradient(90deg, rgba(8,3,24,.94), rgba(8,3,24,.7)); } }
@media (max-width: 620px) { .wordmark-lockup { width: min(170px, calc(100vw - 90px)); }.site-footer .wordmark-lockup { width: 200px; }.portal-hero-viewport, .portal-slide-content { min-height: 610px; }.portal-slide-content { padding-top: 108px; padding-bottom: 98px; }.portal-slide-content::before { margin-bottom: 20px; }.portal-slide-poster { right: 9px; bottom: 31px; width: 140px; max-height: 198px; opacity: .5; }.portal-slide-content h2 { max-width: 92%; }.carousel-arrow { top: auto; bottom: 22px; transform: none; }.carousel-arrow-prev { left: 24px; }.carousel-arrow-next { right: 24px; } }
@media (prefers-reduced-motion: reduce) { .portal-hero::before, .portal-slide-poster { transition: none; transform: none; } }