/* ========================================================================== Waiting Room — Pure CSS Loaded in before JS, no Tailwind dependency. All selectors are scoped under #hp-waiting-room (ID specificity 0,1,x,x) which naturally beats Tailwind Preflight resets (element/universal selectors). ========================================================================== */ #hp-waiting-room { position: fixed; inset: 0; z-index: 9999; overflow: hidden; background: linear-gradient(to bottom right, #f5f6fa, #e6f8f6); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.5; box-sizing: border-box; color: rgb(63 67 90); } #hp-waiting-room *, #hp-waiting-room *::before, #hp-waiting-room *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0; } #hp-waiting-room .wr-inner { position: relative; z-index: 10; display: flex; height: 100%; } #hp-waiting-room .wr-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.5rem; } #hp-waiting-room .wr-card { max-width: 28rem; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; } @media (min-width: 1024px) { #hp-waiting-room .wr-card { align-items: flex-start; text-align: left; } } /* Logo */ #hp-waiting-room .wr-logo-wrap { display: flex; justify-content: center; margin: 0 auto 2rem; } #hp-waiting-room .wr-logo { height: 5rem; width: 5rem; object-fit: contain; display: inline-block; max-width: none; } /* Title */ #hp-waiting-room .wr-title { font-size: 1.5rem; font-weight: 700; color: rgb(63 67 90); margin-bottom: 0.5rem; letter-spacing: -0.025em; line-height: 1.2; } #hp-waiting-room .wr-subtitle { font-size: 1rem; color: rgb(114 121 161); margin-bottom: 2rem; line-height: 1.5; } /* Position */ #hp-waiting-room .wr-position-block { margin-bottom: 1.5rem; } #hp-waiting-room .wr-position-label { font-size: 0.875rem; color: rgb(114 121 161); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.75rem; line-height: 1.5; } #hp-waiting-room .wr-position { font-size: 1rem; font-weight: 700; color: rgb(2 182 169); display: inline-block; line-height: 1; } /* Progress bar */ #hp-waiting-room .wr-progress { position: relative; height: 0.25rem; background-color: rgb(235 237 245); border-radius: 9999px; overflow: hidden; margin-bottom: 1.5rem; max-width: 20rem; width: 100%; } #hp-waiting-room .wr-progress-bar { position: absolute; top: 0; bottom: 0; width: 100%; background: linear-gradient(to right, transparent, rgb(2 182 169), transparent); border-radius: 9999px; } /* Wait time */ #hp-waiting-room .wr-wait-time-container { display: flex; align-items: center; justify-content: center; gap: 0.625rem; margin-bottom: 1.5rem; padding: 0.625rem 1.25rem; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(4px); border-radius: 0.75rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } #hp-waiting-room .wr-wait-time-icon { width: 1rem; height: 1rem; color: rgb(2 182 169); } #hp-waiting-room .wr-wait-time-text { font-size: 0.875rem; font-weight: 600; color: rgb(114 121 161); } /* Description */ #hp-waiting-room .wr-description { font-size: 0.875rem; color: rgb(114 121 161); line-height: 1.625; max-width: 24rem; margin-bottom: 1rem; } /* Live indicator */ #hp-waiting-room .wr-live { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 2rem; } #hp-waiting-room .wr-live-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background-color: rgb(2 182 169); } #hp-waiting-room .wr-reload { font-size: 0.75rem; color: rgb(114 121 161); line-height: 1.5; } /* Responsive */ @media (min-width: 640px) { #hp-waiting-room .wr-title { font-size: 1.875rem; } #hp-waiting-room .wr-position { font-size: 1rem; } } @media (min-width: 1024px) { #hp-waiting-room .wr-center { padding: 1.5rem 3rem; } } /* ========== Scrolling Card Grid ========== */ #hp-waiting-room .wr-grid { display: none; position: relative; overflow: hidden; perspective: 1200px; height: 100%; } @media (min-width: 768px) { #hp-waiting-room .wr-center { width: 55%; flex: none; } #hp-waiting-room .wr-grid { display: block; width: 45%; flex-shrink: 0; } } @media (min-width: 1024px) { #hp-waiting-room .wr-center { width: 50%; } #hp-waiting-room .wr-grid { width: 50%; } } /* Fade edges */ #hp-waiting-room .wr-grid-fade-left { position: absolute; left: 0; top: 0; bottom: 0; z-index: 10; pointer-events: none; width: 8rem; background: linear-gradient(to right, #f5f6fa, transparent); } #hp-waiting-room .wr-grid-fade-top { position: absolute; top: 0; left: 0; right: 0; z-index: 10; pointer-events: none; height: 8rem; background: linear-gradient(to bottom, #f5f6fa, transparent); } #hp-waiting-room .wr-grid-fade-bottom { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; pointer-events: none; height: 8rem; background: linear-gradient(to top, #f5f6fa, transparent); } /* Tilted container */ #hp-waiting-room .wr-grid-tilted { position: absolute; display: flex; gap: 1rem; padding: 0 1rem; transform: rotateX(20deg) rotateZ(-8deg) scale(1.3); transform-origin: center center; top: -40%; bottom: -40%; left: 0; right: -10%; } #hp-waiting-room .wr-grid-col { flex: 0 0 350px; } #hp-waiting-room .wr-grid-scroll { display: flex; flex-direction: column; gap: 1rem; } /* Card */ #hp-waiting-room .wr-grid-card { background: #ffffff; border-radius: 1rem; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08); flex-shrink: 0; } #hp-waiting-room .wr-grid-card-img-wrap { position: relative; } #hp-waiting-room .wr-grid-card-img { width: 100%; height: 8rem; object-fit: cover; display: block; } #hp-waiting-room .wr-grid-card-overlay { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.15); } #hp-waiting-room .wr-grid-card-tag { position: absolute; top: 0.5rem; right: 0.5rem; background: #02B6A9; color: #ffffff; font-size: 10px; font-weight: 700; padding: 0.25rem 0.625rem; border-radius: 9999px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); line-height: 1.2; } #hp-waiting-room .wr-grid-card-body { padding: 0.625rem 0.75rem; } #hp-waiting-room .wr-grid-card-label { font-size: 0.75rem; font-weight: 600; color: rgb(63 67 90); line-height: 1.4; } /* Animations */ @keyframes wr-scroll-up { 0% { transform: translateY(0); } 100% { transform: translateY(-33.333%); } } @keyframes wr-scroll-down { 0% { transform: translateY(-33.333%); } 100% { transform: translateY(0); } } @keyframes wr-shimmer { 0% { transform: translateX(-100%); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } } @keyframes wr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes wr-count { 0% { transform: translateY(8px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { #hp-waiting-room .wr-animate { animation: none !important; } }