:root { --bg: #000; --accent: #00a2ff; }
body { margin: 0; background: var(--bg); color: #fff; overflow: hidden; font-family: 'Courier New', Courier, monospace; }

#app-viewport { width: 100vw; height: 100vh; position: relative; }

/* واجهة البداية */
#overlay { position: fixed; inset: 0; background: #000; z-index: 2000; display: flex; justify-content: center; align-items: center; }
.modal { text-align: center; border: 1px solid #333; padding: 40px; border-radius: 10px; }
#start-btn { background: #fff; color: #000; border: none; padding: 15px 30px; font-weight: bold; cursor: pointer; font-size: 1.2rem; }

/* الملقن - النص في المنتصف */
#teleprompter-container {
    position: absolute; inset: 0; display: flex; justify-content: center; align-items: center;
    z-index: 100; pointer-events: none; padding: 50px; text-align: center;
}
#teleprompter-text { font-size: 2.5rem; line-height: 1.4; text-shadow: 0 0 20px rgba(255,255,255,0.5); transition: opacity 0.5s ease; }

/* المؤثرات */
.rain-layer { position: absolute; inset: 0; background: url('https://www.transparenttextures.com/patterns/stardust.png'); opacity: 0.1; z-index: 10; }
#lightning-bolt { position: fixed; inset: 0; background: #fff; opacity: 0; z-index: 150; pointer-events: none; }

/* المشاهد */
.scene { width: 100%; height: 100%; display: none; position: absolute; }
.scene.active { display: flex; justify-content: center; align-items: center; }
.monitor-glow { width: 80%; height: 60%; background: radial-gradient(circle, rgba(0,162,255,0.15) 0%, transparent 70%); }

/* الآيردروب */
#airdrop-modal { background: rgba(255,255,255,0.9); color: #000; width: 280px; border-radius: 15px; padding: 20px; text-align: center; display: none; z-index: 500; position: absolute; }
.airdrop-header { font-weight: bold; margin-bottom: 10px; }
.airdrop-actions { display: flex; justify-content: space-around; margin-top: 15px; color: #007aff; cursor: pointer; }

/* تأثير الجليتش */
.glitch-effect { animation: shake 0.1s infinite; filter: contrast(150%) hue-rotate(10deg); }
@keyframes shake { 0% {left:0} 50% {left:3px} 100% {left:-3px} }

#timer-display { position: absolute; top: 10px; left: 10px; opacity: 0.3; font-size: 0.8rem; }