/* ═══════════════════════════════════════════════════════ LEVEL MODE — Distinct visual theme & UI Applied when has class "mode-level" ═══════════════════════════════════════════════════════ */ /* ── Level mode body / background ── */ body.mode-level { background: radial-gradient(ellipse at 20% 10%, #1a0a2e 0%, #0d0818 40%, #050510 100%) !important; } /* ── Level HUD override ── */ body.mode-level .hud { background: rgba(10, 4, 22, 0.94) !important; border-bottom: 1px solid rgba(170, 100, 255, 0.22) !important; } body.mode-level .hud-value { color: #c084fc !important; } body.mode-level .hud-sep { background: rgba(170, 100, 255, 0.15) !important; } /* ── Level number badge (shown in HUD during level mode) ── */ #levelBadge { display: none; background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff; border-radius: 8px; padding: 2px 9px; font-size: 11px; font-weight: 900; letter-spacing: .04em; box-shadow: 0 0 12px rgba(124,58,237,0.5); white-space: nowrap; } body.mode-level #levelBadge { display: inline-flex; align-items: center; gap: 4px; } /* ── Mission panel (top banner with goal) ── */ #missionPanel { display: none; position: fixed; top: var(--hud-h); left: 0; right: 0; z-index: 19; padding: 7px 14px; background: linear-gradient(90deg, rgba(10,4,22,0.97) 0%, rgba(30,10,60,0.97) 60%, rgba(10,4,22,0.97) 100%); border-bottom: 1px solid rgba(170,100,255,0.2); display: flex; align-items: center; justify-content: space-between; gap: 10px; backdrop-filter: blur(10px); } body:not(.mode-level) #missionPanel { display: none !important; } body.mode-level #missionPanel { display: flex; } #missionPanel .mission-left { display: flex; align-items: center; gap: 8px; } #missionPanel .mission-icon { font-size: 18px; line-height: 1; filter: drop-shadow(0 0 6px #c084fc); } #missionPanel .mission-texts { display: flex; flex-direction: column; gap: 1px; } #missionPanel .mission-title { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #a78bfa; } #missionPanel .mission-goal { font-size: 12px; font-weight: 800; color: #f0e6ff; } #missionPanel .mission-progress-wrap { flex: 1; max-width: 180px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } #missionPanel .mission-pct { font-size: 10px; font-weight: 800; color: #c084fc; } #missionPanel .mission-bar { width: 100%; height: 5px; background: rgba(124,58,237,0.18); border-radius: 4px; overflow: hidden; } #missionPanel .mission-fill { height: 100%; background: linear-gradient(90deg, #7c3aed, #c084fc); border-radius: 4px; transition: width .35s cubic-bezier(.4,0,.2,1); box-shadow: 0 0 8px rgba(192,132,252,0.6); } /* ── Canvas border glow (level mode) ── */ body.mode-level #gameCanvas { box-shadow: inset 0 0 0 2px rgba(124, 58, 237, 0.18); } /* ── Level walls — drawn in-canvas but give border a tint ── */ body.mode-level .hud-btns .btn-primary { background: linear-gradient(180deg, #a855f7, #7c3aed); color: #f0e6ff; } /* ── Level-mode room frame: corner decorations ── */ #roomFrame { display: none; position: fixed; top: var(--hud-h); left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; } body.mode-level #roomFrame { display: block; } #roomFrame svg { width: 100%; height: 100%; } /* ── Danger flash for enemies (level mode only) ── */ body.mode-level .danger-pulse { animation: dangerPulse .4s ease-in-out; } @keyframes dangerPulse { 0% { background: rgba(255,34,102,0) } 30% { background: rgba(255,34,102,0.12) } 100% { background: rgba(255,34,102,0) } } /* ── Level enemy warning banner ── */ #enemyWarning { display: none; position: fixed; top: calc(var(--hud-h) + 56px); left: 50%; transform: translateX(-50%); z-index: 30; background: rgba(255,34,102,0.12); border: 1px solid rgba(255,34,102,0.4); border-radius: 10px; padding: 5px 14px; font-size: 12px; font-weight: 800; color: #ff5588; pointer-events: none; animation: warnFade 2.5s ease forwards; white-space: nowrap; } @keyframes warnFade { 0% { opacity: 0; transform: translateX(-50%) translateY(-6px); } 15% { opacity: 1; transform: translateX(-50%) translateY(0); } 75% { opacity: 1; } 100% { opacity: 0; } } /* ── Level WIN overlay — purple theme ── */ #levelWinOver .panel { background: rgba(10, 4, 28, 0.97); border: 1px solid rgba(192,132,252,0.3); box-shadow: 0 0 40px rgba(124,58,237,0.25), 0 12px 40px rgba(0,0,0,0.5); } #levelWinOver h1 { background: linear-gradient(135deg, #c084fc, #818cf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } #levelWinOver .btn-primary { background: linear-gradient(180deg, #a855f7, #7c3aed); color: #f0e6ff; box-shadow: 0 0 16px rgba(168,85,247,0.4); } /* ── Level GAME OVER overlay — darker/redder ── */ body.mode-level #overOver .panel { background: rgba(12, 4, 4, 0.97); border: 1px solid rgba(255, 80, 80, 0.22); } /* ── Ad slot inside overlays ── */ .ad-slot { width: 100%; margin-top: 14px; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.1); min-height: 60px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.2); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; cursor: default; user-select: none; } .ad-slot.ad-banner { min-height: 50px; } .ad-slot.ad-rect { min-height: 90px; } /* ── Start screen ad slot ── */ #startAdSlot { width: 100%; max-width: 440px; margin: 10px auto 0; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,0.03); border: 1px dashed rgba(255,255,255,0.08); min-height: 50px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.15); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; } /* ── Level select grid override (purple theme) ── */ body.mode-level .lvl-btn.unlocked, #levelSelectOver .lvl-btn.unlocked { border-color: rgba(168,85,247,0.45); color: #c084fc; } #levelSelectOver .lvl-btn.unlocked:hover { background: rgba(168,85,247,0.12); } #levelSelectOver .lvl-btn.completed { border-color: rgba(192,132,252,0.5); background: rgba(124,58,237,0.15); color: #c084fc; } #levelSelectOver .lvl-btn.completed .lvl-num::after { content: " ✓"; font-size: 10px; } /* ── Mobile adjustments ── */ @media (max-width: 480px), (pointer: coarse) { #missionPanel { padding: 5px 10px; } #missionPanel .mission-goal { font-size: 11px; } #missionPanel .mission-progress-wrap { max-width: 110px; } }