.screen.active { display: flex; } .canvas-area { background: #0a0a0a; border: 2px solid #333; border-radius: 40px; position: relative; overflow: hidden; box-shadow: 0 0 40px rgba(0,0,0,0.5); } .draggable { position: absolute; touch-action: none; cursor: move; display: flex; align-items: center; justify-content: center; padding: 8px; border: 1px solid transparent; } .draggable.selected { border: 1px dashed var(--accent-color); background: rgba(59, 130, 246, 0.1); } .toolbox-item { background: var(--surface-color); border-radius: 12px; padding: 12px; margin-bottom: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; color: var(--text-secondary); border: 1px solid #333; } .toolbox-item:active { transform: scale(0.95); border-color: var(--accent-color); } .btn-primary { background: var(--accent-color); color: white; padding: 12px 24px; border-radius: 12px; font-weight: 600; transition: all 0.2s; } .btn-primary:active { transform: scale(0.95); opacity: 0.9; } .btn-secondary { background: #27272a; color: white; padding: 10px 16px; border-radius: 12px; font-size: 14px; } /* Test Mode Overlay */ #test-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: black; z-index: 1000; visibility: hidden; opacity: 0; transition: opacity 0.3s ease; } #test-overlay.active { visibility: visible; opacity: 1; } .scroll-container { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; } .avatar-img { width: 60px; height: 60px; object-fit: contain; } .object-img { width: 40px; height: 40px; object-fit: contain; } .hidden { display: none !important; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .pulse-active { animation: pulse 0.3s ease-out; } /* Playlist & Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; z-index: 2000; visibility: hidden; opacity: 0; transition: all 0.3s ease; } .modal-overlay.active { visibility: visible; opacity: 1; } .modal-content { background: #121212; border: 1px solid #333; border-radius: 24px; padding: 32px; width: 90%; max-width: 340px; text-align: center; transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .modal-overlay.active .modal-content { transform: scale(1); } .playlist-card { background: #1a1a1a; border: 1px solid #333; padding: 16px; border-radius: 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; } .playlist-card:active { transform: scale(0.98); } .btn-done { opacity: 0.3; pointer-events: none; transition: all 0.3s; } .btn-done.enabled { opacity: 1; pointer-events: auto; } .verify-badge { font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 700; text-transform: uppercase; } .verify-badge.unverified { background: rgba(234, 179, 8, 0.1); color: #eab308; border: 1px solid rgba(234, 179, 8, 0.3); } .verify-badge.verified { background: rgba(34, 197, 94, 0.1); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.3); } .tab-btn { padding: 8px 16px; border-bottom: 2px solid transparent; color: var(--text-secondary); font-size: 14px; } .tab-btn.active { color: var(--accent-color); border-bottom-color: var(--accent-color); font-weight: 600; }