/* Page transition curtain (js/transition.js). */
.curtain { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 40%, #ffffff 0%, #eef3fb 55%, #e2e9f5 100%); }
/* thin loading bar under the card */
/* Sized by the 16:9 frame height (min(100vh, 56.25vw)) so it matches the landscape frame on any screen. */
.curtain::after { content: ''; position: absolute; left: 50%; top: calc(50% + min(calc(var(--vh1) * 12), calc(var(--vw1) * 6.75))); width: min(calc(var(--vh1) * 16), calc(var(--vw1) * 9)); height: 4px; border-radius: 4px; transform: translateX(-50%);
  background: linear-gradient(90deg, #2b6bff, #36c3ff) 0 0 / 40% 100% no-repeat, #d9e1ee; animation: curtainBar 1s ease-in-out infinite; }
@keyframes curtainBar { 0% { background-position: -60% 0, 0 0; } 100% { background-position: 160% 0, 0 0; } }
.c-card { position: relative; width: min(calc(var(--vh1) * 14), calc(var(--vw1) * 7.875)); aspect-ratio: 367 / 512; animation: curtainCard 1.1s cubic-bezier(.45,.05,.55,.95) infinite; filter: drop-shadow(0 10px 22px rgba(30, 45, 90, 0.22)); }
.c-card img { width: 100%; display: block; }
.curtain.in { opacity: 1; }
.curtain.out { opacity: 0; transition: opacity 0.38s ease-out; }
.curtain.out .c-card { transform: scale(1.25); transition: transform 0.38s ease-out; animation: none; }
.curtain.leave { opacity: 1; pointer-events: auto; animation: curtainIn 0.3s ease-in both; }
@keyframes curtainIn { from { opacity: 0; } }
@keyframes curtainCard { 0% { transform: rotateY(0); } 50% { transform: rotateY(180deg) scale(1.06); } 100% { transform: rotateY(360deg); } }
/* in-page view switches (lobby tabs) */
.view-enter { animation: viewEnter 0.32s cubic-bezier(.2,.9,.3,1) both; }
@keyframes viewEnter { from { opacity: 0; transform: translateX(24px); } }

.fly-img { position: fixed; z-index: 10000; pointer-events: none; object-fit: contain; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.45)); }
.curtain.leave.glow { background: radial-gradient(circle at 50% 42%, #fff 0, #fff7e0 30%, #eef3fb 100%); }
.curtain.leave.glow .c-card { opacity: 0; }