/* Play Lab hall preview card (world/PlayLabRoom.js). Desktop: card above the bottom HUD; phones: bottom sheet. */
.playlab-preview {
    --pl-accent: #ff4fd8;
    position: fixed; z-index: 30; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
    width: min(420px, calc(100vw - 32px)); box-sizing: border-box; padding: 22px 22px 18px;
    border: 1px solid color-mix(in srgb, var(--pl-accent) 55%, transparent); border-radius: 18px;
    background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--pl-accent) 28%, #140d2e) 0%, #140d2e 70%);
    color: #f5f1ff; text-align: center; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 40px color-mix(in srgb, var(--pl-accent) 35%, transparent);
    font: 15px/1.5 system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
    animation: playlab-in 0.18s ease-out;
}
@keyframes playlab-in { from { opacity: 0; transform: translate(-50%, 12px); } }
.playlab-icon { font-size: 46px; line-height: 1; filter: drop-shadow(0 0 14px var(--pl-accent)); }
.playlab-chip { display: inline-block; margin-top: 10px; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--pl-accent) 30%, transparent); color: #fff; font-size: 12px; font-weight: 700; }
.playlab-preview h2 { margin: 8px 0 4px; font-size: 22px; }
.playlab-desc { margin: 0 0 16px; color: #cfc7ea; }
.playlab-start { width: 100%; min-height: 48px; border: 0; border-radius: 12px; background: var(--pl-accent); color: #160b2c; font: 800 17px/1 inherit; cursor: pointer; box-shadow: 0 0 20px color-mix(in srgb, var(--pl-accent) 55%, transparent); }
.playlab-share-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.playlab-share-actions button { min-height: 42px; border: 1px solid color-mix(in srgb, var(--pl-accent) 55%, #fff); border-radius: 10px; background: #ffffff12; color: inherit; font: 700 14px/1.2 inherit; cursor: pointer; }
.playlab-share-actions button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.playlab-start:focus-visible, .playlab-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.playlab-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 20px; cursor: pointer; }
.playlab-note { margin: 10px 0 0; color: #a99fcc; font-size: 12px; }
/* Guide station: buttons that walk the avatar to a station; "coming soon" for features not built yet. */
.playlab-guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.playlab-go { min-height: 44px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--pl-accent) 50%, transparent); border-radius: 10px; background: rgba(255, 255, 255, 0.06); color: #fff; font: 700 14px/1.3 inherit; text-align: left; cursor: pointer; }
.playlab-go:hover, .playlab-go:focus-visible { background: color-mix(in srgb, var(--pl-accent) 28%, transparent); outline: 2px solid #fff; outline-offset: 1px; }
.playlab-soon { margin: 0; padding: 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: #ffd98a; font-weight: 700; }
/* Coding Challenge hall: same card, terminal palette. */
.playlab-preview--ai_lab { background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--pl-accent) 22%, #0b1828) 0%, #0b1828 70%); color: #e8f1fb; font-family: system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }
.playlab-preview--ai_lab .playlab-desc { color: #b9cbe0; text-align: left; }
.playlab-preview--ai_lab .playlab-start { color: #04121f; }
@media (max-width: 640px) {
    .playlab-preview { left: 0; right: 0; bottom: 0; transform: none; width: 100%; border-radius: 18px 18px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); animation-name: playlab-up; }
    @keyframes playlab-up { from { opacity: 0; transform: translateY(16px); } }
}